has anyone ever bent a (QML) RangeSlider?

mzimmers

Hi all -

Customer wants a circular slider with 2 handles. RangeSlider would be ideal if I could shape its path into an arc. Initial experimentation was unrewarding; has anyone ever tried this?

Thanks...

J.Hilk

@mzimmers
well, there is Dial:
https://doc.qt.io/qt-5/qml-qtquick-controls2-dial.html

which is probably close to what you want, but not for 2 ranges

the marketplace has this one:

https://marketplace.qt.io/products/circularslider

which is free and you can probably adjust it for your case, since source code is available ?

Mesrine

@mzimmers

This should not be so difficult, one has to customize the background and the handles.

For $25 I will do it for you :).

mzimmers

@J-Hilk I'm familiar with the marketplace app CircularSlider, and actually do use it for a different purpose in my app. It's a great product, but it's somewhat limited in its customization potential, so I don't think that adding a 2nd handle is a trivial undertaking.

I've experimented with overlaying 2 CircularSliders, but the issue there is how to give control to both handles.

@Mesrine I'll take another look at the customization options, though I don't know how the handles will track movement along a curved background. And, I may eventually take you up on your offer, though for now I'd like to continue exploring all options for this.

mzimmers

So, I'm back to looking at this. I'm trying to customize RangeSlider for this. Here's the progress:

I have the circular background I want
I have the circular progrss bar I want
I have the handle I want, and it's properly positioned

What's not working is, I can't grab my custom handle and move it. There is a "grab" area within the circle that is invisible, but moves my handle. I need to figure out whether I can change that "grab" area to be the location of my custom handle.

Here's my code. Sorry it's not shorter, but at least it's a complete reproducible example. Any suggestions would be appreciated. Thanks...

import QtQuick
import QtQuick.Controls
import QtQuick.Shapes

Window {
    id: mainWindow

    readonly property double sliderStartAngle: 30.0
    readonly property double sliderEndAngle: 330.0
    readonly property double sliderAngleRange: sliderEndAngle - sliderStartAngle
    readonly property double sliderRotation: 90.0
    readonly property double minTemp: 11
    readonly property double maxTemp: 400

    readonly property int sliderHeight: 200
    readonly property int sliderWidth: 200
    readonly property int sliderStepSize: 10 // because temps are deciDegrees
    readonly property int sliderTrackWidth: 20
    readonly property int internalRadius: (sliderWidth - sliderTrackWidth) / 2

    property int handleOffset: 0

    property double heatSetpointValue: minTemp
    property double chillSetpointValue: minTemp + ((maxTemp - minTemp) / 4)

    width: 800
    height: 480
    visible: true
    Shape {
        id: sliderBg
        anchors.centerIn: parent
        width: sliderWidth
        height: sliderHeight
        layer.enabled: true
        layer.samples: 8
        ShapePath {
            strokeColor: 'lightblue'
            fillColor: 'transparent'
            strokeWidth: sliderTrackWidth
            capStyle: ShapePath.RoundCap

            PathAngleArc {
                radiusX: internalRadius
                radiusY: internalRadius
                centerX: sliderWidth / 2
                centerY: sliderHeight / 2
                startAngle: sliderStartAngle
                sweepAngle: sliderAngleRange
            }
        }
    }

    RangeSlider {
        id: rangeSlider
        anchors.centerIn: parent
        height: sliderHeight
        width: sliderWidth
        rotation: sliderRotation
        from: minTemp
        to: maxTemp
        first.value: heatSetpointValue
        second.value: chillSetpointValue

        background:
            Shape {
            id: chillProgress
            property double chillProgressRatio: 1.0 - ((maxTemp - rangeSlider.second.value) / (maxTemp - minTemp))
            property double chillProgressAngle: chillProgressRatio * (sliderAngleRange) * (-1)

            anchors.centerIn: parent
            width: sliderWidth
            height: sliderHeight
            layer.enabled: true
            layer.samples: 8
            rotation: sliderRotation * (-1)
            ShapePath {
                strokeColor: 'blue'//therm.isRunning ? Colors.userBlue500 : Colors.ngaTransparent
                fillColor: 'transparent'//Colors.ngaTransparent
                strokeWidth: sliderTrackWidth
                capStyle: ShapePath.RoundCap

                PathAngleArc {
                    id: pathAngleArc
                    radiusX: internalRadius
                    radiusY: internalRadius
                    centerX: sliderWidth / 2
                    centerY: sliderHeight / 2
                    startAngle: sliderStartAngle * (-1)
                    sweepAngle: chillProgress.chillProgressAngle
                }
            }
        }
        second.handle: Rectangle {
            id: chillHandle
            height: sliderTrackWidth
            width: height
            radius: height / 2
            color: 'red'
            x: rangeSlider.width / 2 - width / 2
            y: rangeSlider.height / 2 - height / 2
            z: 2
            antialiasing: true
            transform: [
                Translate {
                    y: -(sliderHeight / 2) + (sliderTrackWidth / 2) + handleOffset
                },
                Rotation {
                    id: rotation
                    angle: chillProgress.chillProgressAngle + (sliderStartAngle * (-1))
                    origin.x: chillHandle.width / 2
                    origin.y: chillHandle.height / 2
                }
            ]
            MouseArea {
                anchors.fill: parent
                onClicked: console.log("clicked!")
            }
        }
    }
}

Mesrine

If you want a RangeSlider that is more than half a circle you need to create a custom control using a mouse area... .

if the control is horizontal one needs to know the y value where the user clicked. This is needed to map the visualPosition to a x,y properties of the handle.
I do not know a way to get the mouse.y where the user clicked from inside RangeSlider type, I suggest creating a custom control.
need to account for https://doc.qt.io/qt-6.2/qml-qtquick-controls2-control.html#event-handling

If the RangeSlider is just half of a Circle then I think you can map the visualPosition to an x,y value and you can just customize the background and the handles of the RangeSlider.

The price is increasing :).