Planned maintenance has been done but it did not solve the problem. So work will continue on this and a new time for trying updates will be announced asap.

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

  • Moderators

    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



  • This post is deleted!


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

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


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



  • @Ahti use Number.toFixed() method

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


  • @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)
            }
    
        }
    }
    


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

    0_1560579737570_Capture.PNG

    QtQuick.Controls 2.2:

    0_1560579446179_Capture.PNG



  • This post is deleted!


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



  • @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)
            }
    
        }
    }
    

Log in to reply