Why doesn't my QML property update when it is bound to Slider.value property?

Question

I have a QML document with an int property, a Slider and a Button in it. I want x to always have the same value as Slider.value. Here's my QML:

Page {
    property int x: 1

    content: Container {
        Slider {
            fromValue: 1
            toValue: 500
            value: x
            onValueChanged: {
                console.log("Slider value is: "+value);
                console.log("x value: "+x);  
            }
        }
        Button {
            text: "Increment x"
            onClicked: {
                x=x+10;
            }
        }
    }
}

When I press the Button the slider value is updated AND x is updated. But when I move the slider, the value of x is not updated. Why doesn't the value of x change when I move the slider?

Answer 1

Because your x is not bind to the Slider.value. When you bind Slider.value to x, if x change, Slider.value will also change BUT if Slider.value change (when you slide it), x value will not be change.

To solve this you can use the alias type

property alias x: slider.value // assume the Slider has a id of "slider"

Answer 2

Try this:

Page {
property int x: **sliderID.value**

content: Container {
    Slider {
        **id: sliderID**
        fromValue: 1
        toValue: 500
        value: x
        onValueChanged: {
            console.log("Slider value is: "+value);
            console.log("x value: "+x);  
        }
    }
    Button {
        text: "Increment x"
        onClicked: {
            x=x+10;
        }
    }
}

}

I established a two-way binding.

Answer 3

Use onImmediateValueChanged signal instead of onValueChanged

...
onImmediateValueChanged: {
    console.log("Slider value is: "+value);
    console.log("x value: "+x);  
}
...