Important: Please read the Qt Code of Conduct -

QtQuick Slider: Style: Handle: mouse area size

  • Current Problem: The Slider can't reach its full range:
    Original Problem: The slider handle needed a larger "mouseArea" for easier use on a touch screen.
    First Cut Solution: I met with Jens at the Digia booth at SF Developer days and he came up with this solution:
    A larger Item wrapped around the visible handle. This solved the problem, but now prevents the slider from using its full range (since the larger item is now considered to be the actual handle). I tried changing the min/max, but that didn't fix it. Here's the code:

    id: gammaSlider
    objectName: "gammaSlider"
    horizontalCenter: gammaValueLabel.horizontalCenter
    topMargin: labelMargin
    top: gammaValueLabel.bottom
    bottom: histogramContainer.bottom

            orientation: Qt.Vertical
            minimumValue: 0
            maximumValue: transformController.mGetSliderMaxValue()
            stepSize: transformController.mGetSliderStepSize()
            style: SliderStyle {
                    groove: Rectangle {
                        color: kMainColor
                        implicitWidth: 16
                        implicitHeight: 7
                        radius: 4
                    //nesting yields extra MouseArea
                    handle: Item {
                        width: 56
                        height: 56
                        Rectangle {
                            anchors.centerIn: parent
                            color: "gray"
                            border.color: controlOrange
                            border.width: 2
                            width: 26
                            height: 26
                            radius: 13

Log in to reply