[solved] Margins on sliders doesn't work

bam500

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,

literA2

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. ;)

bam500

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,

literA2

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