Creating QML Controls  From Scratch: Slider

Creating QML Controls From Scratch: Slider

By Chris Cortopassi


Continuing our QML Controls from Scratch series, this time we will implement a Slider. The Slider has value, minimum, and maximum public properties. Slider is implemented with a single MouseArea that covers the entire control and utilizes drag to handle the user sliding the "pill" (the portion which the user moves ) left and right.

The background "tray" (a horizontal line, which can be tapped) is split into left and right pieces so that it doesn't show through the pill when enabled is set to false (since the pill is partially transparent in the disabled state). The only tricky parts about Slider are the equations to compute the value from pixels and pixels from the value.


import QtQuick 2.0

Item {
    id: root
// public
    property double maximum: 10
    property double value:    0
    property double minimum:  0
    signal clicked(double value);  //onClicked:{root.value = value;  print('onClicked', value)}
// private
    width: 500;  height: 100 // default size
    opacity: enabled  &&  !mouseArea.pressed? 1: 0.3 // disabled/pressed state
    Repeater { // left and right trays (so tray doesn't shine through pill in disabled state)
        model: 2
        delegate: Rectangle {
            x:     !index?               0: pill.x + pill.width - radius
            width: !index? pill.x + radius: root.width - x;  height: 0.1 * root.height
            radius: 0.5 * height
            color: 'black'
            anchors.verticalCenter: parent.verticalCenter
    Rectangle { // pill
        id: pill
        x: (value - minimum) / (maximum - minimum) * (root.width - pill.width) // pixels from value
        width: parent.height;  height: width
        border.width: 0.05 * root.height
        radius: 0.5 * height
    MouseArea {
        id: mouseArea

        anchors.fill: parent
        drag {
            target:   pill
            axis:     Drag.XAxis
            maximumX: root.width - pill.width
            minimumX: 0
        onPositionChanged:  if( setPixels(pill.x + 0.5 * pill.width) // drag pill
        onClicked:                          setPixels(mouse.x) // tap tray
    function setPixels(pixels) {
        var value = (maximum - minimum) / (root.width - pill.width) * (pixels - pill.width / 2) + minimum // value from pixels
        clicked(Math.min(Math.max(minimum, value), maximum)) // emit


import QtQuick 2.0

Slider {
    property double backend: 0
    maximum:  10
    value:    backend
    minimum: -10
    onClicked: backend = value


In this post, we created a Slider. Next time we'll create a ScrollBar element. The source code can be downloaded here. Be sure to check out my webinar on-demand. I walk you through all 17 QML controls with code examples.