Thumb wheel control?

[RogueWarrior]

Has anyone implemented a thumb-wheel type of control?
Something like this:
https://www.winccoa.com/documentation/WinCCOA/latest/en_US/Native_GEDI/Thumb_wheel.html

It's a bit like a tumbler but it would have no limits per se and it could have a horizontal or vertical orientation.

My goal is to tie the movement to an edit box so you could quickly get an arbitrary number in there.

Starting with a mouse area probably makes sense but the drawing aspect is more difficult. A three step gradient would give the appearance of it being round but there are also tick marks that would need to be drawn and ideally animated so it looks like you're rolling a wheel.

[Markkyboy]

import QtQuick 2.6
import Sailfish.Silica 1.0     //probably use QtQuick.Controls instead
import QtGraphicalEffects 1.0
import QtFeedback 5.0

Page {
    id: page

    allowedOrientations: Orientation.All // sailfishOS stuff

    //  feedback - vibra
    HapticsEffect {
        id: vibrate
        attackIntensity: 10
        attackTime: 10
        intensity: 0.1
        fadeIntensity: 0.1
        fadeTime: 1
        period: 1
        duration: 100
        running: false
    }

    // path rectangle - make it look like synth hardware
    Rectangle {
        id: root
        width: 220
        height: 1200
        color: "black"
        radius: 22
        border { width: 11; color: "grey" }
        anchors.centerIn: parent
        clip: true

        // path
        PathView {
            id: path
            model: 100
            width: parent.width
            height: parent.height
            anchors.centerIn: parent
            path: Path {
                id: pathView
                startX: root.width / 2
                startY: 0
                // play with this lot!!
                PathAttribute { name: "itemZ"; value: 0 }
                PathAttribute { name: "itemOpacity"; value: 0.25 }
                //PathAttribute { name: "itemAngle"; value: -90.0; }
                PathAttribute { name: "itemScale"; value: 0.5; }
                PathLine { x: root.width / 2; y: root.height * 0.4; }
                //PathPercent { value: 0.48; }
                PathLine { x: root.width / 2; y: root.height * 0.5; }
                //PathAttribute { name: "itemAngle"; value: 0.0; }
                PathAttribute { name: "itemScale"; value: 0.7; }
                PathAttribute { name: "itemOpacity"; value: 1.0 }
                PathAttribute { name: "itemZ"; value: 100 }
                PathLine { x: root.width / 2; y: root.height * 0.6; }
                //PathPercent { value: 0.52; }
                PathLine { x: root.width / 2; y: root.height; }
                //PathAttribute { name: "itemAngle"; value: 90.0; }
                PathAttribute { name: "itemScale"; value: 0.5; }
                PathAttribute { name: "itemOpacity"; value: 0.25 }
                PathAttribute { name: "itemZ"; value: 0 }
            }
            clip: true
            pathItemCount: 19
            flickDeceleration: 50000
            preferredHighlightBegin: 0.5
            preferredHighlightEnd:   0.5

            delegate: flipCardDelegate
        }
        // delegate
        Component {
            id: flipCardDelegate

            // this rectangle makes up scroll wheel color and shape
            Rectangle {
                id: wrapper
                width: 200
                height: width/2
                z: PathView.itemZ
                antialiasing: true
                visible: PathView.onPath
                scale: PathView.itemScale
                opacity: PathView.itemOpacity
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "#292929" }
                    GradientStop { position: 0.5; color: "#494949" }
                    GradientStop { position: 1.0; color: "#292929" }
                }
                border { width: 4; color: "black" }
                Label {
                    text: index+1
                    visible: false
                    anchors.centerIn: parent
                    color: wrapper.PathView.isCurrentItem ? "green" : "red"
                }
            }
        }
    }

    // percentage label and percent icon
    Label {
        id: percentLabel
        font.pixelSize: 86
        text: path.currentIndex + " %"
        anchors { top: root.bottom; topMargin: Theme.horizontalPageMargin; horizontalCenter: root.horizontalCenter }
    }
}

[RogueWarrior]

Thank you so much! This gets me 95% of the way there.