[solved] Margins on sliders doesn't work



  • Hi,

    I'm trying to display three sliders in my app (one above the other). I set their position using anchors. As they're too close to eachother I'm using top and bottom margins on the middle slider so that they appear less close. But it doesn't seem to work as I change the value of the margins :

    Rectangle
            {
                id: rectanglePourcentageLiquide
                width: centerArea.width*1/2
                height: centerArea.height*1/2
                anchors.top: rectangleVueLaterale.bottom
                anchors.left: rectangleVueLaterale.left
                color: "transparent"
    
                // Left tank
                Slider
                {
                    id: sliderLeft
                    width: centerArea.width*1/2 - centerArea.width*1/10
                    anchors.top: rectangleVueLaterale.bottom
                    anchors.bottom: sliderMiddle.top
                    anchors.horizontalCenter: parent.horizontalCenter
                    minimumValue: 0
                    maximumValue: 100
                    stepSize: 1
                    onValueChanged: { 
                    }
                }
    
                // Middle tank
                Slider
                {
                    id: sliderMiddle
                    width: centerArea.width*1/2 - centerArea.width*1/10
                    anchors.centerIn: parent
                    anchors.topMargin: 100
                    anchors.bottomMargin: 100
                    minimumValue: 0
                    maximumValue: 100
                    stepSize: 1
                    onValueChanged: { }
                }
    
                // Right tank
                Slider
                {
                    id: sliderRight
                    width: centerArea.width*1/2 - centerArea.width*1/10
                    anchors.top: sliderMiddle.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    minimumValue: 0
                    maximumValue: 100
                    stepSize: 1
                    onValueChanged: { 
                    }
                }
    
    

    Do margins work with sliders ? If not, is there another way to keep them away ?

    Regards,



  • I think it would be easy if you make use of Column to display them vertically and use its spacing property.

         Item    // use Item as container since you only set its color as transparent
         {
            id: rectanglePourcentageLiquide
            width: centerArea.width*0.5
            height: centerArea.height*0.5
            anchors {
               top: rectangleVueLaterale.bottom
               left: rectangleVueLaterale.left
            }
    
            Column {
               id: sliderColumn
               anchors {
                   verticalCenter: parent.verticalCenter
                   left: parent.left
                   leftMargin: centerArea.width*0.05
                   right: parent.right
                   rightMargin: centerArea.width*0.05
                }
               spacing: 100
    
            // Left tank
            Slider
            {
                id: sliderLeft
                anchors { left: parent.left; right: parent.right }
                minimumValue: 0
                maximumValue: 100
                stepSize: 1
                onValueChanged: { 
                }
            }
    
            // Middle tank
            Slider
            {
                id: sliderMiddle
                anchors { left: parent.left; right: parent.right }
                minimumValue: 0
                maximumValue: 100
                stepSize: 1
                onValueChanged: { }
            }
    
            // Right tank
            Slider
            {
                id: sliderRight
                anchors { left: parent.left; right: parent.right }
                minimumValue: 0
                maximumValue: 100
                stepSize: 1
                onValueChanged: { 
                }
            }
        }
    }
    

    In your code, the reason why the margins didn't work because you've anchored the Middle tank on the center of the parent.

    Hope this helps. ;)



  • Thank you literA2,

    It really helped. What if I want to add TexteLabel on the right of each Slider ? Do I have to encapsulate each Slider + TexteLabel with an Item or I have to use a Grid to have two columns ?

    Regards,



  • @bam500 Yes, using GridLayout is an option so that the vertical alignment of the texts are equal.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.