diff --git a/example/qml-Qt6/component/CodeExpander.qml b/example/qml-Qt6/component/CodeExpander.qml
index f69c879a..7387033f 100644
--- a/example/qml-Qt6/component/CodeExpander.qml
+++ b/example/qml-Qt6/component/CodeExpander.qml
@@ -136,7 +136,8 @@ FluExpander{
"FluTour",
"FluQRCode",
"FluTimeline",
- "FluChart"
+ "FluChart",
+ "FluRangeSlider"
];
code = code.replace(/\n/g, "
");
code = code.replace(/ /g, " ");
diff --git a/example/qml-Qt6/page/T_Slider.qml b/example/qml-Qt6/page/T_Slider.qml
index 517904a6..98f89965 100644
--- a/example/qml-Qt6/page/T_Slider.qml
+++ b/example/qml-Qt6/page/T_Slider.qml
@@ -11,11 +11,18 @@ FluScrollablePage{
FluArea{
Layout.fillWidth: true
- height: 100
- paddings: 10
+ Layout.preferredHeight: 200
Layout.topMargin: 20
- FluSlider{
- anchors.verticalCenter: parent.verticalCenter
+ paddings: 10
+
+ Row{
+ spacing: 30
+ FluSlider{
+ }
+ FluSlider{
+ orientation: Qt.Vertical
+ anchors.verticalCenter: parent.verticalCenter
+ }
}
}
CodeExpander{
@@ -26,25 +33,27 @@ FluScrollablePage{
}'
}
+
FluArea{
Layout.fillWidth: true
- height: 200
- paddings: 10
+ Layout.preferredHeight: 200
Layout.topMargin: 20
- FluSlider{
- orientation: Qt.Vertical
- anchors.left: parent.left
- anchors.verticalCenter: parent.verticalCenter
+ paddings: 10
+ Row{
+ spacing: 30
+ FluRangeSlider{
+ }
+ FluRangeSlider{
+ orientation: Qt.Vertical
+ anchors.verticalCenter: parent.verticalCenter
+ }
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
- code:'FluSlider{
+ code:'FluRangeSlider{
orientation: Qt.Vertical
- value:50
}'
}
-
-
}
diff --git a/example/qml/component/CodeExpander.qml b/example/qml/component/CodeExpander.qml
index 5570c48b..cc547cec 100644
--- a/example/qml/component/CodeExpander.qml
+++ b/example/qml/component/CodeExpander.qml
@@ -136,7 +136,8 @@ FluExpander{
"FluTour",
"FluQRCode",
"FluTimeline",
- "FluChart"
+ "FluChart",
+ "FluRangeSlider"
];
code = code.replace(/\n/g, "
");
code = code.replace(/ /g, " ");
diff --git a/example/qml/page/T_Slider.qml b/example/qml/page/T_Slider.qml
index 7d0c64b7..f46465ea 100644
--- a/example/qml/page/T_Slider.qml
+++ b/example/qml/page/T_Slider.qml
@@ -12,11 +12,18 @@ FluScrollablePage{
FluArea{
Layout.fillWidth: true
- height: 100
- paddings: 10
+ Layout.preferredHeight: 200
Layout.topMargin: 20
- FluSlider{
- anchors.verticalCenter: parent.verticalCenter
+ paddings: 10
+
+ Row{
+ spacing: 30
+ FluSlider{
+ }
+ FluSlider{
+ orientation: Qt.Vertical
+ anchors.verticalCenter: parent.verticalCenter
+ }
}
}
CodeExpander{
@@ -27,25 +34,28 @@ FluScrollablePage{
}'
}
+
FluArea{
Layout.fillWidth: true
- height: 200
- paddings: 10
+ Layout.preferredHeight: 200
Layout.topMargin: 20
- FluSlider{
- orientation: Qt.Vertical
- anchors.left: parent.left
- anchors.verticalCenter: parent.verticalCenter
+ paddings: 10
+ Row{
+ spacing: 30
+ FluRangeSlider{
+ }
+ FluRangeSlider{
+ orientation: Qt.Vertical
+ anchors.verticalCenter: parent.verticalCenter
+ }
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
- code:'FluSlider{
+ code:'FluRangeSlider{
orientation: Qt.Vertical
- value:50
}'
}
-
-
}
+
diff --git a/example/src/main.cpp b/example/src/main.cpp
index 9b20b8fc..d5df129e 100644
--- a/example/src/main.cpp
+++ b/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);
diff --git a/src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml b/src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml
new file mode 100644
index 00000000..a7257ad7
--- /dev/null
+++ b/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)
+ }
+}
+
diff --git a/src/Qt5/imports/FluentUI/Controls/FluStatusView.qml b/src/Qt5/imports/FluentUI/Controls/FluStatusView.qml
index 6fac6d3d..1b6d9c99 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluStatusView.qml
+++ b/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
diff --git a/src/Qt5/imports/FluentUI/qmldir b/src/Qt5/imports/FluentUI/qmldir
index ce2081b6..49175a4f 100644
--- a/src/Qt5/imports/FluentUI/qmldir
+++ b/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
diff --git a/src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml b/src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml
new file mode 100644
index 00000000..9e575610
--- /dev/null
+++ b/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)
+ }
+}
diff --git a/src/resource.qrc b/src/resource.qrc
index 9d9e72fc..ada937f7 100644
--- a/src/resource.qrc
+++ b/src/resource.qrc
@@ -92,5 +92,6 @@
Qt5/imports/FluentUI/Controls/ColorPicker/Content/NumberBox.qml
Qt5/imports/FluentUI/Controls/ColorPicker/Content/PanelBorder.qml
Qt5/imports/FluentUI/Controls/ColorPicker/Content/SBPicker.qml
+ Qt5/imports/FluentUI/Controls/FluRangeSlider.qml