Kylin/Fluent/qml/RangeSlider.qml
2024-08-31 12:32:26 +08:00

118 lines
4.8 KiB
QML

import QtQuick as Quick
import QtQuick.Controls.impl
import QtQuick.Templates as T
import Fluent
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: Quick.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: 20
implicitHeight: 20
radius: width / 2
color:Theme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
Shadow{
radius: 10
}
Icon{
width: 10
height: 10
iconSource: Icons.FullCircleMask
iconSize: 10
scale:{
if(control.first.pressed){
return 0.9
}
return control.first.hovered ? 1.2 : 1
}
iconColor: Theme.primaryColor
anchors.centerIn: parent
Quick.Behavior on scale{
Quick.NumberAnimation{
duration: 167
easing.type: Quick.Easing.OutCubic
}
}
}
}
second.handle: Quick.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: 20
implicitHeight: 20
radius: width / 2
color:Theme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
Shadow{
radius: 10
}
Icon{
width: 10
height: 10
iconSource: Icons.FullCircleMask
iconSize: 10
scale:{
if(control.second.pressed){
return 0.9
}
return control.second.hovered ? 1.2 : 1
}
iconColor: Theme.primaryColor
anchors.centerIn: parent
Quick.Behavior on scale{
Quick.NumberAnimation{
duration: 167
easing.type: Quick.Easing.OutCubic
}
}
}
}
background: Quick.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
Quick.Rectangle{
anchors.fill: parent
anchors.margins: 1
radius: 2
color:Theme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
}
Quick.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: Theme.primaryColor
}
}
Tooltip{
parent: control.first.handle
visible: control.tooltipEnabled && (control.first.pressed || control.first.hovered)
text:String(isTipInt?Math.round(control.first.value):control.first.value)
}
Tooltip{
parent: control.second.handle
visible: control.tooltipEnabled && (control.second.pressed || control.second.hovered)
text:String(isTipInt?Math.round(control.second.value):control.second.value)
}
}