QML Binding Slider Value with When Statement

Question

I want to bind a rectangle to a slider in QML. X axis slider's max value is 360. Below 180, rectangle should move in the direction of change. Above 180, rectangle should move in the reverse direction of change.

Here is my code snippet for slider and rectangle

Slider {
        id: xAxis
        x: 60
        y: 45
        width: 200
        value: 60
        maximumValue: 360

    Rectangle {
        id: rect
        width: parent.width/10
        height: parent.height/4
        color: "transparent"
        border.color: "red"
        border.width: 5
        radius: 10
    }

Code snippet for binding

Binding {
        target: rect
        property: "x"
        value: (180 + (180 - xAxis.value))*(Screen.width/90)
        when: xAxis.updateValueWhileDragging && xAxis.value >= 180
    }

It doesn't update in that circumstance. What is the source of problem?

Answer 1

You need to add another binding for behaviour between 0 and 180

Binding {
    target: rect
    property: "x"
    value: (xAxis.value)*(Screen.width/90)
    when: xAxis.updateValueWhileDragging && xAxis.value < 180
}