How to move label with the slider handler in qml
-
I want to move the position of label as I change the value of slider. The label should move under the slider handler how would I do it ? here is my code so far:
Label { id: new_label text: "0" font.pixelSize: 15 anchors.top: new_slider.bottom } Slider { width: parent.width anchors.margins: 20 id: new_slider minimumValue: 0 maximumValue: 100 value: 50 stepSize: 1.0 onValueChanged: { new_label.text = value } }
-
You can bind slider position in label:
Label { // ... your current code here anchors.left: new_slider.left anchors.leftMargin: new_slider.position }
It mat be possible to anchor to the handle itself:
Slider { Label { anchors.top: handle.bottom anchors.left: handle.left } }
Or, of course, you can implement the label directly in handle, see: https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-slider
-
@Ahti Hi,
You can "follow" handle position
import QtQuick 2.0 import QtQuick.Controls 2.2 Item{ width: 600 height: 600 visible: true Label { id: new_label text: new_slider.value x: new_slider.handle.x + new_slider.handle.width / 2 - width / 2 //Follow Slider's handle position onXChanged: console.log(x) font.pixelSize: 15 anchors.top: new_slider.bottom } Slider { width: parent.width onPositionChanged: console.log(position) id: new_slider from: 0 to: 100 value: 50 stepSize: 1.0 } }
Edit: Implementing the label in the handle, as suggested by @sierdzio, seems to be a better solution
-
@sierdzio said in How to move label with the slider handler in qml:
Label {
// ... your current code here
anchors.left: new_slider.left
anchors.leftMargin: new_slider.position
}I guess you meant :
anchors.leftMargin: new_slider.position * new_slider.width
Or something similar ?
-
@Ahti You are probably using Quick Controls 1. This properties are available only with Slider from Quick Controls 2.
If you are stuck with Quick Controls 1, you need to calculate
position
by yourselfproperty real position : value - minimumValue / (maximumValue - miniumValue)
-
@Gojir4 With custom handle, as suggested by @sierdzio :
import QtQuick 2.2 import QtQuick.Controls 2.2 Slider { id: control value: 50 from: 0 to: 100 handle: Item { x: control.leftPadding + control.visualPosition * (control.availableWidth - width) y: control.topPadding + control.availableHeight / 2 - hd.height/2//height / 2 implicitWidth: 26 implicitHeight: 64 Rectangle{ id: hd anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter width: parent.width height: 26 radius: 13 color: control.pressed ? "#d0d0d0" : "#d6d6d6" border.color: "#9d9e9f" } Label{ id: lb anchors.top: hd.bottom anchors.horizontalCenter: parent.horizontalCenter text: control.value.toFixed(2) } } }
-
@Ahti said in How to move label with the slider handler in qml:
@Gojir4 After migrating from QtQuick.Controls 1.4 to 2.2 slider looks empty there is no blue strip inside of it how would I get it in 2.2 ?
QtQuick.Controls 1.4:QtQuick.Controls 2.2:
You can either customize your component, or apply a style (Material style, Universal style)
see https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-slider and https://doc.qt.io/qt-5/qtquickcontrols2-styles.html#using-styles-in-qt-quick-controls-2import QtQuick 2.2 import QtQuick.Controls 2.2 Slider { id: control value: 50 from: 0 to: 100 background: Rectangle { x: control.leftPadding y: control.topPadding + control.availableHeight / 2 - height / 2 implicitWidth: 200 implicitHeight: 4 width: control.availableWidth height: implicitHeight radius: 2 color: "#bdbebf" Rectangle { width: control.visualPosition * parent.width height: parent.height color: "#21be2b" // Your color here radius: 2 } } handle: Item { x: control.leftPadding + control.visualPosition * (control.availableWidth - width) y: control.topPadding + control.availableHeight / 2 - hd.height/2//height / 2 implicitWidth: 26 implicitHeight: 64 Rectangle{ id: hd anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter width: parent.width height: 26 radius: 13 color: control.pressed ? "#d0d0d0" : "#d6d6d6" border.color: "#9d9e9f" } Label{ id: lb anchors.top: hd.bottom anchors.horizontalCenter: parent.horizontalCenter text: control.value.toFixed(2) } } }