Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Vertical Slider in qml



  • Hi,

    I am trying to make changes in the below piece of code for vertical slider. How is it possible?

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    
    Slider {
        id: control
        value: 0.5
    
        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"
                radius: 2
            }
        }
    
        handle: Rectangle {
            x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
            y: control.topPadding + control.availableHeight / 2 - height / 2
            implicitWidth: 26
            implicitHeight: 26
            radius: 13
            color: control.pressed ? "#f0f0f0" : "#f6f6f6"
            border.color: "#bdbebf"
        }
    }
    

    Can anyone suggest, where to do the possible changes in this piece of code?



  • Disregarding all the extra code, you can change using 'orientation'

        Slider {
            id: control
            value: 0.5
            orientation: Qt.Vertical
        }
    }
    

    Or, with the rest of your code (crude but it works)

        Slider {
            id: control
            value: 0.5
            rotation: 90       // <--- rotation
            x: -50; y: 100     // x & y position
    
            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"
                    radius: 2
                }
            }
    
            handle: Rectangle {
                x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
                y: control.topPadding + control.availableHeight / 2 - height / 2
                implicitWidth: 26
                implicitHeight: 26
                radius: 13
                color: control.pressed ? "#f0f0f0" : "#f6f6f6"
                border.color: "#bdbebf"
            }
        }
    }
    


  • @Markkyboy

    I want to create a slider which serve both the purpose of Vertical and horizontal.

    Is it possible without the below mentioned code snippet.

     Slider {
            id: control
            value: 0.5
            orientation: Qt.Vertical
        }
    

    Any other possibility?



  • Also i am not able to understand how to set x and y for background rectangle, handle rectangle?


  • Moderators

    @QtQmlLearner said in Vertical Slider in qml:

    I want to create a slider which serve both the purpose of Vertical and horizontal.

    Simultaneously ? No Slider.qml is not sophisticated enough for that, you'll have to grease your own form



  • @QtQmlLearner

    Please bear in mind I am also quite new to all things QML!, so I am still learning and always will be :)

    The following code should answer both of your current queries. I am not sure why you would want dual purpose slider (vertical & horizontal), maybe this will work for you, so here's what I came up with;

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    
    Window {
        id: main
        visible: true
        width: 300
        height: width
        title: qsTr("Vertical & Horizontal Slider")
    
        Rectangle {
            // serves as a rotation platform for the slider
            // click or hold in rectangle to rotate rectangle/slider
            id: rect; radius: 20
            width: 200; height: width
            color: "#11000000" // set to "#00000000" or "transparent" for transparency
            x: 50; y: 50 // sets position of rectangle in window
        }
    
        Slider {
            z: 1 // z axis puts slider on top of rectangle
            id: slider
            value: 0.5 // sets slider position, in this case; half way
            anchors.centerIn: parent
            style: SliderStyle {
                groove: Rectangle {
                    implicitWidth: 200
                    implicitHeight: 8
                    color: "green"
                    radius: 8
                }
                handle: Rectangle {
                    anchors.centerIn: parent
                    color: control.pressed ? "grey" : "lightgrey"
                    border.color: "black"
                    border.width: 2
                    implicitWidth: 34
                    implicitHeight: 34
                    radius: 17 // half of implicitWidth & implicitHeight to make handle round
                }
            }
        }
        MouseArea {
            anchors.fill: rect
            onClicked: {
                rect.rotation = 90 // turns rectangle 90 degrees clockwise
                slider.orientation = Qt.Horizontal // Qt.Horizontal is default for slider
                console.log("Slider is now horizontal")
            }
            onPressAndHold: {
                rect.rotation = 0 // turns rectangle back to 0 degrees
                slider.orientation = Qt.Vertical
                console.log("Slider is now vertical")
            }
        }
    }
    
    

    vertical slider.JPG horizontal slider.JPG


Log in to reply