Sliders

 From:  Michael Gibson
4749.7 In reply to 4749.5 
Hi Brian, re: binders - there are some commands that set up a binding between a slider and a text input field, like Twist.htm or Blend.htm so you could look in those files for a current working example.

But basically you first need to give each control an id="" attribute - that will then give it a name that can be referred to in script.

Then if you want to tie those 2 controls together so when one is changed the other will be updated, you can use a binder to do that. There are a few different ways to set up binders, but in a case like this is it easiest to use a binding map attribute - in v3 that's a binding="" attribute that you can declare on a control. There are also a couple of different forms of binding maps, the most simple which can be used in this case is a direct assignment 2-way binder, which is just 2 properties that have an = between them. With that kind of binding map, MoI will monitor each property and when it is changed reflect that value onto the other one. So with 2 controls that will have the effect of keeping the controls synchronized to one another.

Here's an example:

code:
    <moi:Slider id="myslider" value="1.0" min="1.0" max="10.0" />
    <moi:NumericInput id="myinput" binding="this.value = myslider.value" />


That will create 2 controls, a slider and then a numeric input field. The numeric input field has a binder="" declared on it which will cause the values of the 2 controls to be synchronized - that binding map means that any changes on the property on one side of the = will then cause the value on the other side of the equal to be updated - in this case it will cause the slider and the input field to be synchronized to have the same value.

Then since they will have the same value, in your command script you can retrieve the value from either one of them, it doesn't really matter which one you get it from.

There are other kinds of binders as well, like setting up a binding between a UI control's value and a geometry factory's input slot so that any time the UI control's value changes it will then apply the new property to the geometry factory and call .update() on it - when you set one of those up then you don't have to do any manual event handling of that control after that.


Hope this helps!

- Michael