QML Slider : handle and mouse cursor

Question

I created a slider in an item and customized it like in the following code :

Item {
    id: item1
    x: 0
    y: 0
    width: 200
    height: parent.height

    Rectangle {
        id: background
        anchors.fill: parent;
        color:Qt.rgba(0.9,0.9,0.9,1);
    }

    Slider {
        anchors.centerIn: parent
        orientation: Qt.Vertical
        height: parent.height

        style: SliderStyle {
            groove: Rectangle {
                implicitWidth: 200
                implicitHeight: 8
                color: "gray"
                radius: 8
            }
            handle: Rectangle {
                anchors.centerIn: parent
                color: control.pressed ? "white" : "lightgray"
                border.color: "gray"
                border.width: 2
                width: 20
                height: 20
                radius: 6
            }
        }
    }

}

The problem appears when I change the size of the handle to have it wider than high, so I change in the handle :

width: 20
height: 80 //the height is changed instead of width but I think
           //it's because it is a vertical slider

And then, when I move the handle, it doesn't stay under the mouse cursor but there is an offset between the two.

How to fix that?

Mitch Mitch · Accepted Answer · 2016-03-17T17:06:08

The slider is internally rotated 90 degrees when the orientation is vertical, so you'll need to set the width instead of the height. In other words, always style the handle assuming that the slider is horizontal, and the rest will just work...

... except for the mouse offset bug that you just ran into. It appears that your use case isn't auto-tested. Please submit a bug report at bugreports.qt.io.

QML Slider : handle and mouse cursor

1 Answers