RangeSlider.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0
RangeSlider {
id: control
first.value: 0.25
second.value: 0.75
property color checkedColor: "#3498DB"
background: Rectangle {
x: control.leftPadding
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 200
implicitHeight: 10
width: control.availableWidth
height: implicitHeight
radius: height / 2
color: "#EBEDEF"
Rectangle {
x: control.first.visualPosition * parent.width
width: control.second.visualPosition * parent.width - x
height: parent.height
color: control.checkedColor
radius: height / 2
layer.enabled: control.hovered | control.pressed
layer.effect: DropShadow {
transparentBorder: true
color: control.checkedColor
samples: 8
}
}
}
first.handle: Rectangle {
x: control.leftPadding + first.visualPosition * (control.availableWidth - width)
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 16
implicitHeight: 16
radius: implicitHeight / 2
color: control.pressed ? Qt.darker(control.checkedColor, 1.2) : control.checkedColor
// color: first.pressed ? "#f0f0f0" : "#f6f6f6"
// border.color: "#bdbebf"
layer.enabled: control.hovered | control.pressed
layer.effect: DropShadow {
transparentBorder: true
color: control.checkedColor
samples: 10
}
ToolTip {
parent: first.handle
visible: first.pressed
text: first.value.toFixed(1)
}
}
second.handle: Rectangle {
x: control.leftPadding + second.visualPosition * (control.availableWidth - width)
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 16
implicitHeight: 16
radius: implicitHeight / 2
color: control.pressed ? Qt.darker(control.checkedColor, 1.2) : control.checkedColor
// color: second.pressed ? "#f0f0f0" : "#f6f6f6"
// border.color: "#bdbebf"
layer.enabled: control.hovered | control.pressed
layer.effect: DropShadow {
transparentBorder: true
color: control.checkedColor
samples: 10
}
ToolTip {
parent: second.handle
visible: second.pressed
text: second.value.toFixed(1)
}
}
}
