CODEWITHSUNDEEP
qtqmlqtquickcontrols
George Thomas
George Thomas

Reputation: 4586

SlideBar handle from center QML

In slidebar in qml the slide starts from the start. Is there any way we could specify like to make it start from the center. Like when dragging to left it should show the color. just like having a negative slider

I tried out something like this but For me it(orange progress) should start from the center and propagate left and right from the center like a balance bar.

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Item {
    Slider {
        anchors.centerIn: parent
        value: 0.5
        width: 400
        style: SliderStyle {
            groove: Rectangle {
                implicitHeight: 2
                color: "lightgrey"
                radius: 3

                Rectangle {
                    implicitHeight: 2
                    color: "orange"
                    radius: 3
                    implicitWidth: control.value * parent.width

                }
            }             
        }
    }
}

Upvotes: 1

Views: 1029

Answers (1)

derM
derM

Reputation: 13691

So you are looking for something like this?

Slider {
    id: slide
    anchors.centerIn: parent
    minimumValue: -1
    maximumValue: 1
    value: 0.0
    width: 400
    style: SliderStyle {
        groove: Rectangle {
            implicitHeight: 2
            color: "lightgrey"
            radius: 3

            Rectangle {
                anchors {
                    left: (control.value > 0 ? parent.horizontalCenter : undefined)
                    right: (control.value <= 0 ? parent.horizontalCenter : undefined)
                }

                implicitHeight: 2
                color: "orange"
                radius: 3
                width: Math.abs(control.value) * parent.width / 2

            }
        }
    }
}

For non-negative values, it should be pretty easy to adapt. Just set anchors/margins right, when it passes your threshold. The width is calculated by calculating the percentage of the value for this segment multiplied by the segment length (in pixel)...

Upvotes: 2

Related Questions