Customizing Slider in QT 5.6 (QML)

Question

I am trying to customize a standard slider that I am using. I am not trying to do much I just want to increase my track width and change the handle to a rectangle. I looked at the documentation but I am having a trouble understanding it. In order to customize the track the documentation has shown the below code

track: Rectangle {
    x: control.leftPadding + (horizontal ? 0 : (control.availableWidth - width) / 2)
    y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : 0)
    implicitWidth: horizontal ? 200 : 6
    implicitHeight: horizontal ? 6 : 200
    width: horizontal ? control.availableWidth : implicitWidth
    height: horizontal ? implicitHeight : control.availableHeight
    radius: 3
    border.color: "#353637"
    color: "#ffffff"
    scale: horizontal && control.mirrored ? -1 : 1

    readonly property bool horizontal: control.orientation === Qt.Horizontal   
}

what is control over here?

I am using Qt5.6 and I am using Qt controls lab. Can someone just point me in the right direction ?

The control in your code snippet is probably referring to the Control Layout of Control QML Type. You can find some relevant information here: doc.qt.io/qt-5/qml-qtquick-controls2-control.html — SASUPERNOVA

derM derM · Accepted Answer · 2017-03-10T07:15:39

In analogy to the QtQuick.Controls 2.x-Documentation, control is the id that is set to the Slider itself. So they use it to reference the properties of the Slider.

The full example should look something like that:

Slider {
    id: control // <--- see the control here
    width: 300
    height: 30

    track: Rectangle {
        x: control.leftPadding + (horizontal ? 0 : (control.availableWidth - width) / 2)
        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : 0)
        implicitWidth: horizontal ? 200 : 6
        implicitHeight: horizontal ? 6 : 200
        width: horizontal ? control.availableWidth : implicitWidth
        height: horizontal ? implicitHeight : control.availableHeight
        radius: 3
        border.color: "#353637"
        color: "#ffffff"
        scale: horizontal && control.mirrored ? -1 : 1

        readonly property bool horizontal: control.orientation === Qt.Horizontal   
    }
}

Customizing Slider in QT 5.6 (QML)

1 Answers