Skip to content

Instantly share code, notes, and snippets.

@0smr
Last active April 1, 2025 00:54
Show Gist options
  • Save 0smr/c7dfbbe287f21ce6de7fc1e41d1144a3 to your computer and use it in GitHub Desktop.
Save 0smr/c7dfbbe287f21ce6de7fc1e41d1144a3 to your computer and use it in GitHub Desktop.
a custom QML slider
import QtQuick 2.15
import QtQuick.Controls 2.15
Slider {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitHandleWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitHandleHeight + topPadding + bottomPadding)
spacing: 3
padding: 6
stepSize: 0.01
property alias tooltip: tooltip
handle: Rectangle {
x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
y: control.topPadding + (control.vertical ? control.visualPosition * (control.availableHeight - height) : (control.availableHeight - height) / 2)
implicitWidth: 15
implicitHeight: 15
radius: width/2
border.width: control.pressed ? width/2 : 1
border.color: control.background.color
Behavior on border.width { SmoothedAnimation {} }
ToolTip {
id: tooltip
x: control.vertical ? control.spacing + parent.width : (15 - width)/2
y: control.horizontal ? -control.spacing - parent.width : (15 - height)/2
padding: 3
opacity: 0.8
visible: control.pressed
parent: control.handle
text: control.value.toFixed((control.stepSize + '.').split('.')[1].length)
font.pixelSize: parent.width/2
delay: 100; timeout: 0
background: Rectangle { radius: 3; border.width: 1; opacity: 0.2 }
}
}
background: Rectangle {
x: (control.width - width) / 2
y: (control.height - height) / 2
implicitWidth: control.horizontal ? 200 : 1
implicitHeight: control.horizontal ? 1 : 200
width: control.horizontal ? control.availableWidth : implicitWidth
height: control.horizontal ? implicitHeight : control.availableHeight
radius: width
color: !control.enabled ? control.palette.mid : Qt.lighter(control.palette.button, control.pressed ? 1.0 : 1.1)
}
}
@litovko
Copy link

litovko commented Oct 11, 2023

Does this code work if the slider orientation is Qt.Vertical?

@0smr
Copy link
Author

0smr commented Oct 11, 2023

@litovko Hi, I improved the code to support vertical orientation.
But if you are interested, please check out my other repositories and the styles I have written.

Neumorphism, Snow White, Qooey, Hive.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment