jQuery UI - Slider & Spinner not updating each other properly

Question

I'm trying to bind jQuery's Slider to jQuery's Spinner, and have them both update each other and some other stuff on the page (progress bar & display output in a h1).

However my problem arises when I try to change the Slider. Since they are both changing each other, moving the Slider updates the Spinner, which in turn updates the Slider but with some strange behaviour: a kind of delay in the application of the css styling for width of fills.

I can fix the delay by commenting out

        // Spinner speak to range slider fill
        // $( "#rangeFill" ).css( "width", ui.value + "%");

but then when the user changes the spinner value, only the handle of the slider moves, but not it's fill.

Fiddle: http://jsfiddle.net/PaulOD/2T9RU/

any help most appreciated, Thanks, Paul

Answer 1

Paul, I believe your issue arises because of the way you are setting the value of your spinners when sliding. If you move too fast when sliding the slide event can't keep up with you and as a result your spinner values get behind which causes your issues.

if (ui.value > last) {
    $("#spinners").spinner("stepUp", 1);
}
if (ui.value < last) {
    $("#spinners").spinner("stepDown", 1);
}

So update your spinners like so:

$("#spinners").spinner("value", ui.value);

Now your spinners will always keep up with the latest slider value.

FIDDLE