import QtQuick import QtQuick.Controls import QtQuick3D import Qt.labs.animation View3D { width: 1024; height: 480; x: 40; y: 40 anchors.topMargin: 50 DirectionalLight { eulerRotation.y: 90 } DirectionalLight { eulerRotation.y: -45 } PerspectiveCamera { z: 600 } Node { objectName: "left object" x: -120; z: 400 eulerRotation.x: -15 eulerRotation.y: 10 Model { source: "#Cube" pickable: true materials: DefaultMaterial { diffuseMap: Texture { sourceItem: Rectangle { height: 256 width: 256 color: "#444" border.color: "cyan" border.width: 2 antialiasing: true Row { anchors { fill: parent; margins: 20 } Slider { orientation: Qt.Vertical } DragAnywhereSlider { } Slider { } } } } } } } component DragAnywhereSlider: Item { id: root property int value: 50 property int maximumValue: 99 width: 100 height: 240 DragHandler { id: dragHandler target: knob xAxis.enabled: false yAxis.minimum: slot.y yAxis.maximum: slot.height + slot.y - knob.height } WheelHandler { id: wheelHandler acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad invertible: false rotationScale: -0.5 target: knob property: "y" } Rectangle { id: slot anchors.top: parent.top anchors.bottom: parent.bottom anchors.margins: 10 anchors.topMargin: 30 anchors.bottomMargin: 30 anchors.horizontalCenter: parent.horizontalCenter width: 10 color: "black" radius: width / 2 smooth: true } Rectangle { id: knob objectName: "Slider Knob" width: parent.width - 2 height: 30 radius: 5 color: "beige" border.width: 3 border.color: hover.hovered ? "orange" : "black" property bool programmatic: false property real multiplier: root.maximumValue / (dragHandler.yAxis.maximum - dragHandler.yAxis.minimum) onYChanged: if (!programmatic) root.value = root.maximumValue - (knob.y - dragHandler.yAxis.minimum) * multiplier transformOrigin: Item.Center function setValue(value) { knob.y = dragHandler.yAxis.maximum - value / knob.multiplier } HoverHandler { id: hover objectName: "Slider" } BoundaryRule on y { id: ybr minimum: slot.y maximum: slot.height + slot.y - knob.height } } Component.onCompleted: { knob.programmatic = true knob.setValue(root.value) knob.programmatic = false } } }