Regarding verticle slider in Qml



  • Hi all,
    I am using slider in my project, i have customized the slider with groove and handle, as i know by default the slider orientation is Qt.Horizontal, but when i change it to Qt.Vertical i am not able to see the customized slider, only handle i am able to see and no groove
    what changes i have to make in my code. i tried with changing the width and height of the groove but didn't get the output. but when i remove the groove part i am able to get the slider.

    Here is my code:

    import QtQuick 2.6
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    
    Window {
        visible: true
        width: 640
        height: 480
    
        Slider {
            id: theSlider
    
            property alias sliderWidth: theSlider.width
            property alias sliderValue: theSlider.value
    
            width:250
            maximumValue: 100
            minimumValue: 0
            value:0
            orientation: Qt.Vertical
            anchors.centerIn: parent
            updateValueWhileDragging : true
            style: SliderStyle {
                groove:  Rectangle {
                    id: grooveMainrect
                    height: 5
                    antialiasing: true
                    radius: 5
                    color: "#847878"
                    Rectangle {
                        id: groovechildrect
                        width: (parent.width * theSlider.value)/theSlider.maximumValue
                        height: parent.height
                        color: Qt.lighter("#7ea6d6", 1.2)
                        radius: parent.radius
                    }
                }
    
                handle: Rectangle {
                    id:handlemainrect
                    height: (handlechildrect.height/3)+2
                    width: (handlechildrect.width/3)+2
                    radius: handlechildrect.width/2
                    anchors.verticalCenter: parent.verticalCenter
                    color: Qt.lighter("#7ea6d6", 1.2)
                    Rectangle {
                        id: handlechildrect
                        width: 25
                        height: 25
                        anchors.centerIn: parent
                        color: "#000000"
                        radius: width/2
                        opacity: 0.5
                    }
                }
            }
        }
    }
    

  • Moderators

    @Naveen_D Always provide width and height. You are missing height.



  • @p3c0 Ya i got that..thanks. but my slider is not starting with the minimum value, by default the handle will be at the max value.


  • Moderators

    @Naveen_D Hmm, something strange. If you give width and height to slider then its default value is set to maximum whereas if not given then it is set to minimum. Here are 2 cases:

    //Works as expected
    Item {
        width: 300
        height: 300
    
        Slider {
            orientation: Qt.Vertical
        }
    }
    
    //This doesn't
    Item {
        width: 300
        height: 300
    
        Slider {
            width: 200
            height: 200
            orientation: Qt.Vertical
        }
    }
    

    Could this be a bug @jpnurmi ?



  • @p3c0 One more thing, when i am increasing the value of the slider i am seeing decrease in the slider handle position, for example, i f i give slider value as 80, the actual slider handle will be appearing at 20. what is the mistake?


Log in to reply
 

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