CustomQQuickDial.qml

in main.cpp:

include "customqquickdial.h"

    qmlRegisterType<CustomQQuickDial>("CustomQQuickDial", 1, 0, "CustomQQuickDial" );


in CustomQQuickDial.qml:

import CustomQQuickDial 1.0

CustomQQuickDial {
            id: dial
            implicitWidth: 100
            implicitHeight: 100
            stepSize: 1/21
            snapMode: Dial.SnapAlways
            wheelEnabled: true
            wrap: true
            background: Rectangle {
                id: backG
                x: dial.width / 2 - width / 2
                y: dial.height / 2 - height / 2
                width: dial.width
                height: width
                color: "transparent"
                radius: width / 2
                border.color: Qt.lighter("#333333")
                border.width: 15
                opacity: dial.enabled ? 1 : 0.3

                Rectangle {
                    id: circle
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    height: parent.height/2
                    width: parent.width/2
                    radius: height/2
                }
                MouseArea {
                    anchors.fill: parent
                    propagateComposedEvents: true
                    onWheel: {
                        if(wheel.angleDelta.y === 120)
                        {
                            if(dial.value < (1.0-dial.stepSize))
                                dial.increase()
                            else
                                dial.value = 0;
                        }
                        else if(wheel.angleDelta.y === -120)
                        {
                            if(dial.value > 0)
                                dial.decrease()
                            else
                                dial.value = 1-dial.stepSize;
                        }
                    }
                    onClicked: mouse.accepted = false;
                    onPressed: mouse.accepted = false;
                    onReleased: mouse.accepted = false;
                    onDoubleClicked: mouse.accepted = false;
                    onPositionChanged: mouse.accepted = false;
                    onPressAndHold: mouse.accepted = false;
                }
            }
            handle: Rectangle {
                id: handleItem
                x: dial.background.x + dial.background.width / 2 - width / 2
                y: dial.background.y + dial.background.height / 2 - height / 2
                width: backG.border.width
                height: backG.border.width
                radius: backG.border.width / 2
                antialiasing: true
                opacity: dial.enabled ? 1 : 0.3
                transform: [
                    Translate {
                        y: -Math.min(dial.background.width+25, dial.background.height+25) * 0.4 + handleItem.height / 2
                    },
                    Rotation {
                        angle: dial.angle
                        origin.x: handleItem.width / 2
                        origin.y: handleItem.height / 2
                    }
                ]
            }
        }