82 lines
1.7 KiB
QML
82 lines
1.7 KiB
QML
// SciSlider.qml — themed slider for the quick-settings panel.
|
|
// Imperative two-way use: set `.value` from the outside, read `.moved(v)`.
|
|
// (Avoids QML binding loops with live PipeWire/brightness state.)
|
|
import QtQuick
|
|
|
|
Item {
|
|
id: slider
|
|
|
|
implicitHeight: 24
|
|
|
|
property real value: 0.5 // 0..1
|
|
property color accent: "#00e5ff"
|
|
property color trackColor: "#24283b"
|
|
readonly property bool pressed: mouseArea.pressed
|
|
|
|
signal moved(real v)
|
|
|
|
function setFromMouse(mx) {
|
|
if (width <= 0)
|
|
return;
|
|
let v = mx / width;
|
|
if (v < 0)
|
|
v = 0;
|
|
if (v > 1)
|
|
v = 1;
|
|
if (v !== slider.value) {
|
|
slider.value = v;
|
|
slider.moved(v);
|
|
}
|
|
}
|
|
|
|
// track
|
|
Rectangle {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: parent.width
|
|
height: 6
|
|
radius: 3
|
|
color: slider.trackColor
|
|
border.color: "#394b70"
|
|
border.width: 1
|
|
}
|
|
|
|
// filled portion
|
|
Rectangle {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.left: parent.left
|
|
width: slider.value * parent.width
|
|
height: 6
|
|
radius: 3
|
|
color: slider.accent
|
|
}
|
|
|
|
// knob
|
|
Rectangle {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
x: slider.value * (parent.width - width)
|
|
width: 14
|
|
height: 14
|
|
radius: 7
|
|
color: slider.pressed ? "#ffffff" : slider.accent
|
|
border.color: "#0b0e14"
|
|
border.width: 1
|
|
Behavior on color { ColorAnimation { duration: 120 } }
|
|
}
|
|
|
|
MouseArea {
|
|
id: mouseArea
|
|
anchors {
|
|
fill: parent
|
|
topMargin: -6
|
|
bottomMargin: -6
|
|
}
|
|
cursorShape: Qt.PointingHandCursor
|
|
hoverEnabled: true
|
|
onPressed: mouse => slider.setFromMouse(mouse.x)
|
|
onPositionChanged: mouse => {
|
|
if (pressed)
|
|
slider.setFromMouse(mouse.x);
|
|
}
|
|
}
|
|
}
|