[SOLVED] Limit dragging range

[Markkyboy]

I've created a rotary style volume control. I can animate the movement from 0 to 10 and back, but I'd like to control it by touch.

I have tried to use mapToRange() as shown to me before here on the forum, but I've no idea how to use it with the mouse.

Here's what I have so far, using ArunPK's "CircularSlider.qml";

    CircularSlider {
        id: volume
        width: 800
        height: width
        minValue: 0
        maxValue: 100
        startAngle: -135
        endAngle: 135
        interactive: true
        // red dot
        handleWidth: 30
        handleRadius: handleWidth/2
        handleHeight: handleWidth
        handleVerticalOffset: 50
        handleColor: "red"

        value: progress.angle
        anchors.centerIn: parent

        CircularProgress {
            id: progress
            size: 950
            lineWidth: 320
            primaryColor: "#191919"
            anchors.centerIn: parent
            rotation: volume.startAngle
            property real angle: mapToRange(value, 10, 0, 10, 0)

            function mapToRange(x, maxRangeOld, minRangeOld,maxRangeNew, minRangeNew) { return (x-minRangeOld)/(maxRangeOld-minRangeOld) * (maxRangeNew-minRangeNew) + minRangeNew }

            Rectangle {
                width: 800
                height: width
                radius: width/2
                color: progress.primaryColor
                anchors.centerIn: parent
            }

            MouseArea {
                id: mouse
                anchors.fill: parent
                property real truex: mouseX - volume.width/2
                property real truey: volume.height / 2-mouseY
                property real angle: Math.atan2(truex, truey)
                property real exactangle: parseInt(angle * 180 / Math.PI)
                property real modulo: exactangle
                onPositionChanged: {
                    if  (mouse.angle < 0)
                         progress.angle = exactangle
                    else progress.angle = exactangle
                }
            }
        }
        Repeater {
            model: 11
            Label {
                id: digits
                text: index
                color: Theme.primaryColor
                font.pixelSize: 60
                property real angle: index * 27
                rotation: -digits.angle + volume.endAngle
                transform: [ Translate { x: volume.width / 2 - width / 2; y: -110 },
                    Rotation { origin.x: volume.width / 2; origin.y: volume.height / 2; angle: digits.angle + volume.startAngle }
                ]
            }
        }
    }

[Markkyboy]

@Markkyboy - solved it, answer staring me in the face. Have been using CircularSlider all wrong!, doh!