Vertical Slider in qml

[QtQmlLearner]

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?

[Markkyboy]

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

[QtQmlLearner]

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

[QtQmlLearner]

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

[J.Hilk]

@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

[Markkyboy]

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