Using knockout js with jquery ui sliders

Question

I\'m trying to figure out if knockout js would work nicely for the following problem:

I have multiple sliders that I want to link to textboxes.

When the tex

Answer 1

@John Earles and @Michael Kire Hansen: thanks for your wonderful solutions!

I used the advanced code from Michael Kire Hansen. I tied the "max:" option of the slider to a ko.observable and it turned out that the slider does not correctly update the value in this case. Example: Lets say the slider is at value 25 of max 25 und you change the max value to 100, the slider stays at the most right position, indicating that it is at the max value (but value is still 25, not 100). As soon as you slide one point to the left, you get the value updated to 99.

Solution: in the "update:" part just switch the last two lines to:

$(element).slider("option", allBindingsAccessor().sliderOptions);
$(element).slider("value", value);

This changes the options first, then the value and it works like a charm.