fix #264

example/qml-Qt6/component/CodeExpander.qml

@@ -136,7 +136,8 @@ FluExpander{
                     "FluTour",
                     "FluQRCode",
                     "FluTimeline",
-                    "FluChart"
+                    "FluChart",
+                    "FluRangeSlider"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml-Qt6/page/T_Slider.qml

@@ -11,13 +11,20 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 200
-        paddings: 10
         Layout.topMargin: 20
+        paddings: 10
+
+        Row{
+            spacing: 30
             FluSlider{
+            }
+            FluSlider{
+                orientation: Qt.Vertical
                 anchors.verticalCenter: parent.verticalCenter
             }
         }
+    }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
@@ -26,25 +33,27 @@ FluScrollablePage{
 }'
     }
 
+
     FluArea{
         Layout.fillWidth: true
-        height: 200
+        Layout.preferredHeight: 200
-        paddings: 10
         Layout.topMargin: 20
-        FluSlider{
+        paddings: 10
+        Row{
+            spacing: 30
+            FluRangeSlider{
+            }
+            FluRangeSlider{
                 orientation: Qt.Vertical
-            anchors.left: parent.left
                 anchors.verticalCenter: parent.verticalCenter
             }
         }
+    }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
-        code:'FluSlider{
+        code:'FluRangeSlider{
     orientation: Qt.Vertical
-    value:50
 }'
     }
-
-
 }

example/qml/component/CodeExpander.qml

@@ -136,7 +136,8 @@ FluExpander{
                     "FluTour",
                     "FluQRCode",
                     "FluTimeline",
-                    "FluChart"
+                    "FluChart",
+                    "FluRangeSlider"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/page/T_Slider.qml

@@ -12,13 +12,20 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 200
-        paddings: 10
         Layout.topMargin: 20
+        paddings: 10
+
+        Row{
+            spacing: 30
             FluSlider{
+            }
+            FluSlider{
+                orientation: Qt.Vertical
                 anchors.verticalCenter: parent.verticalCenter
             }
         }
+    }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
@@ -27,25 +34,28 @@ FluScrollablePage{
 }'
     }
 
+
     FluArea{
         Layout.fillWidth: true
-        height: 200
+        Layout.preferredHeight: 200
-        paddings: 10
         Layout.topMargin: 20
-        FluSlider{
+        paddings: 10
+        Row{
+            spacing: 30
+            FluRangeSlider{
+            }
+            FluRangeSlider{
                 orientation: Qt.Vertical
-            anchors.left: parent.left
                 anchors.verticalCenter: parent.verticalCenter
             }
         }
+    }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
-        code:'FluSlider{
+        code:'FluRangeSlider{
     orientation: Qt.Vertical
-    value:50
 }'
     }
-
-
 }
+

example/src/main.cpp

@@ -36,7 +36,7 @@ int main(int argc, char *argv[])
     FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow);
 #ifdef Q_OS_WIN // 此设置仅在Windows下生效
     FramelessConfig::instance()->set(Global::Option::ForceHideWindowFrameBorder);
-    FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow,true);
+    FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow,false);
 #endif
 #ifdef Q_OS_MACOS
     FramelessConfig::instance()->set(Global::Option::ForceNonNativeBackgroundBlur,false);

src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml

@@ -0,0 +1,120 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Templates 2.15 as T
+import FluentUI 1.0
+
+T.RangeSlider {
+    id: control
+    property bool tooltipEnabled: true
+    property bool isTipInt: true
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            first.implicitHandleWidth + leftPadding + rightPadding,
+                            second.implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             first.implicitHandleHeight + topPadding + bottomPadding,
+                             second.implicitHandleHeight + topPadding + bottomPadding)
+    padding: 6
+    first.value: 0
+    second.value: 100
+    stepSize: 1
+    from: 0
+    to:100
+    snapMode: RangeSlider.SnapAlways
+    first.handle: Rectangle {
+        x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
+        implicitWidth: 24
+        implicitHeight: 24
+        radius: width / 2
+        color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+        FluShadow{
+            radius: 12
+        }
+        Rectangle{
+            width: 24
+            height: 24
+            radius: 12
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            anchors.centerIn: parent
+            scale: {
+                if(control.first.pressed){
+                    return 4/10
+                }
+                return control.first.hovered ? 6/10 : 5/10
+            }
+            Behavior on scale {
+                enabled: FluTheme.enableAnimation
+                NumberAnimation{
+                    duration: 167
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+    }
+
+    second.handle: Rectangle {
+        x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
+        implicitWidth: 24
+        implicitHeight: 24
+        radius: width / 2
+        color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+        FluShadow{
+            radius: 12
+        }
+        Rectangle{
+            width: 24
+            height: 24
+            radius: 12
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            anchors.centerIn: parent
+            scale: {
+                if(control.second.pressed){
+                    return 4/10
+                }
+                return control.second.hovered ? 6/10 : 5/10
+            }
+            Behavior on scale {
+                enabled: FluTheme.enableAnimation
+                NumberAnimation{
+                    duration: 167
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+    }
+
+    background: Item {
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: control.horizontal ? 180 : 6
+        implicitHeight: control.horizontal ? 6 : 180
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
+        scale: control.horizontal && control.mirrored ? -1 : 1
+        Rectangle{
+            anchors.fill: parent
+            anchors.margins: 1
+            radius: 2
+            color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
+        }
+        Rectangle {
+            x: control.horizontal ? control.first.position * parent.width + 3 : 0
+            y: control.horizontal ? 0 : control.second.visualPosition * parent.height + 3
+            width: control.horizontal ? control.second.position * parent.width - control.first.position * parent.width - 6 : 6
+            height: control.horizontal ? 6 : control.second.position * parent.height - control.first.position * parent.height - 6
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+        }
+    }
+    FluTooltip{
+        parent: control.first.handle
+        visible: control.tooltipEnabled && (control.first.pressed || control.first.hovered)
+        text:String(isTipInt?Math.round(control.first.value):control.first.value)
+    }
+    FluTooltip{
+        parent: control.second.handle
+        visible: control.tooltipEnabled && (control.second.pressed || control.second.hovered)
+        text:String(isTipInt?Math.round(control.second.value):control.second.value)
+    }
+}
+

src/Qt5/imports/FluentUI/Controls/FluStatusView.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.15
+import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0

src/Qt5/imports/FluentUI/qmldir

@@ -92,4 +92,5 @@ FluTooltip 1.0 Controls/FluTooltip.qml
 FluTour 1.0 Controls/FluTour.qml
 FluTreeView 1.0 Controls/FluTreeView.qml
 FluWindow 1.0 Controls/FluWindow.qml
+FluRangeSlider 1.0 Controls/FluRangeSlider.qml
 plugin fluentuiplugin

src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml

@@ -0,0 +1,120 @@
+import QtQuick
+import QtQuick.Controls.Basic
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+import FluentUI
+
+T.RangeSlider {
+    id: control
+    property bool tooltipEnabled: true
+    property bool isTipInt: true
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            first.implicitHandleWidth + leftPadding + rightPadding,
+                            second.implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             first.implicitHandleHeight + topPadding + bottomPadding,
+                             second.implicitHandleHeight + topPadding + bottomPadding)
+    padding: 6
+    first.value: 0
+    second.value: 100
+    stepSize: 1
+    from: 0
+    to:100
+    snapMode: RangeSlider.SnapAlways
+    first.handle: Rectangle {
+        x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
+        implicitWidth: 24
+        implicitHeight: 24
+        radius: width / 2
+        color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+        FluShadow{
+            radius: 12
+        }
+        Rectangle{
+            width: 24
+            height: 24
+            radius: 12
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            anchors.centerIn: parent
+            scale: {
+                if(control.first.pressed){
+                    return 4/10
+                }
+                return control.first.hovered ? 6/10 : 5/10
+            }
+            Behavior on scale {
+                enabled: FluTheme.enableAnimation
+                NumberAnimation{
+                    duration: 167
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+    }
+
+    second.handle: Rectangle {
+        x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
+        implicitWidth: 24
+        implicitHeight: 24
+        radius: width / 2
+        color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+        FluShadow{
+            radius: 12
+        }
+        Rectangle{
+            width: 24
+            height: 24
+            radius: 12
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            anchors.centerIn: parent
+            scale: {
+                if(control.second.pressed){
+                    return 4/10
+                }
+                return control.second.hovered ? 6/10 : 5/10
+            }
+            Behavior on scale {
+                enabled: FluTheme.enableAnimation
+                NumberAnimation{
+                    duration: 167
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+    }
+
+    background: Item {
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: control.horizontal ? 180 : 6
+        implicitHeight: control.horizontal ? 6 : 180
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
+        scale: control.horizontal && control.mirrored ? -1 : 1
+        Rectangle{
+            anchors.fill: parent
+            anchors.margins: 1
+            radius: 2
+            color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
+        }
+        Rectangle {
+            x: control.horizontal ? control.first.position * parent.width + 3 : 0
+            y: control.horizontal ? 0 : control.second.visualPosition * parent.height + 3
+            width: control.horizontal ? control.second.position * parent.width - control.first.position * parent.width - 6 : 6
+            height: control.horizontal ? 6 : control.second.position * parent.height - control.first.position * parent.height - 6
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+        }
+    }
+    FluTooltip{
+        parent: control.first.handle
+        visible: control.tooltipEnabled && (control.first.pressed || control.first.hovered)
+        text:String(isTipInt?Math.round(control.first.value):control.first.value)
+    }
+    FluTooltip{
+        parent: control.second.handle
+        visible: control.tooltipEnabled && (control.second.pressed || control.second.hovered)
+        text:String(isTipInt?Math.round(control.second.value):control.second.value)
+    }
+}

src/resource.qrc

@@ -92,5 +92,6 @@
         <file>Qt5/imports/FluentUI/Controls/ColorPicker/Content/NumberBox.qml</file>
         <file>Qt5/imports/FluentUI/Controls/ColorPicker/Content/PanelBorder.qml</file>
         <file>Qt5/imports/FluentUI/Controls/ColorPicker/Content/SBPicker.qml</file>
+        <file>Qt5/imports/FluentUI/Controls/FluRangeSlider.qml</file>
     </qresource>
 </RCC>