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?

Dickson · Accepted Answer · 2012-12-02T05:25:37.177

4

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"

edited Dec 02 '12 at 05:25

answered Dec 01 '12 at 15:08

Dickson

1,201
10
19

Many thanks. It's not quite ideal because I actually want a property of type `int` rather than type `real` which is what `slider.value` is. But it's fairly easy to work around. – donturner Dec 04 '12 at 08:52
@donturner: What are you trying to achieve actually? If you want to change the value when a button is press (like the example above), just change the `Slider.value` directly. Alias type is mainly use for expose children's property to top level. – Dickson Dec 04 '12 at 15:31
I am trying to use the slider to control the speed of an animation, for which I need an integer value to specify the duration of the animation in milliseconds. I can now do this in Javascript by referencing the alias and converting it to an int. – donturner Dec 04 '12 at 17:39

score 2 · Answer 2 · answered Nov 30 '12 at 16:36

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.

answered Nov 30 '12 at 16:36

bslack

21
1

Unfortunately on beta 4 I get the error: `main.qml:4:1: QML bb::cascades::QmlPage_QML_0: Binding loop detected for property "x"` – donturner Dec 04 '12 at 08:40

score 1 · Answer 3 · answered Dec 02 '12 at 13:20

1

Use onImmediateValueChanged signal instead of onValueChanged

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

answered Dec 02 '12 at 13:20

Nishant Shah

1,590
1
15
25

When using this method it works fine when changing the slider but I get different values for `value` and `x` when the button is clicked (and I still get the "binding loop detected" message). – donturner Dec 04 '12 at 08:50

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

3 Answers3