How to customize Slider?
-
-
Hi!
Slider { id: control from: 0 to: 1 value: 0 function colorFromValue(v) { return Qt.rgba(v, 0, 1-v) } handle: Rectangle { x: control.leftPadding + control.visualPosition * (control.availableWidth - width) y: control.topPadding + control.availableHeight / 2 - height / 2 implicitWidth: 26 implicitHeight: 26 radius: 13 border.color: "#000" color: control.colorFromValue( control.valueAt(control.position) ) } }
-
Hi!
Slider { id: control from: 0 to: 1 value: 0 function colorFromValue(v) { return Qt.rgba(v, 0, 1-v) } handle: Rectangle { x: control.leftPadding + control.visualPosition * (control.availableWidth - width) y: control.topPadding + control.availableHeight / 2 - height / 2 implicitWidth: 26 implicitHeight: 26 radius: 13 border.color: "#000" color: control.colorFromValue( control.valueAt(control.position) ) } }
-
Hi!
Slider { id: control from: 0 to: 1 value: 0 function colorFromValue(v) { return Qt.rgba(v, 0, 1-v) } handle: Rectangle { x: control.leftPadding + control.visualPosition * (control.availableWidth - width) y: control.topPadding + control.availableHeight / 2 - height / 2 implicitWidth: 26 implicitHeight: 26 radius: 13 border.color: "#000" color: control.colorFromValue( control.valueAt(control.position) ) } }
-
@vishu_fcb How it doesn't work? In that example it's the handle color that changes, you can of course customize your slider so that it's the background rectangle that changes. See "customizing slider" in the documentation and qml/QtQuick/Controls2/Slider.qml in your Qt installation. Wieland just gave the basic idea: the color is bind to the slider position via a function.
-
@vishu_fcb How it doesn't work? In that example it's the handle color that changes, you can of course customize your slider so that it's the background rectangle that changes. See "customizing slider" in the documentation and qml/QtQuick/Controls2/Slider.qml in your Qt installation. Wieland just gave the basic idea: the color is bind to the slider position via a function.