How to move label with the slider handler in qml

Ahti

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
        }
   }

sierdzio

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

Gojir4

@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

Ahti

This post is deleted!

Gojir4

@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 ?

Gojir4

@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 yourself

property real position : value - minimumValue / (maximumValue - miniumValue)

Ahti

@Gojir4 I get real number as label text I want integer how would I get integer ?

Gojir4

@Ahti use Number.toFixed() method

Label {
        ...
        text: new_slider.value.toFixed(0)
        ...
    }

Gojir4

@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

@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:

Ahti

This post is deleted!

Ahti

@Gojir4 I tried

new_slider.handle.width / 4

that gave a prefect position of label also how would I position the label to current slider value initially ?

Gojir4

@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-2

import 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)
        }

    }
}