CODEWITHSUNDEEP
jqueryjquery-uislider
dukevin
dukevin

Reputation: 23188

Does the slider in jquery ui have a bug?

The jquery slider from the ui plugin seems to work fine until you move the handle especially fast.

Here's a demo: http://jsfiddle.net/5aXba/5/

Move the slider normally for expected results, then move it as fast as you can back and forth and it breaks. Move it fast enough in the demo and all the content disappears.

How can we go around this problem? Is this completely unavoidable?

Upvotes: 1

Views: 207

Answers (1)

Jaak Kütt
Jaak Kütt

Reputation: 2656

I wouldn't say it's a bug per se - more like a limitation. The question is basically about what's the length of the slider, how many steps can you fit/register on it and how your mouse movement will be captured and rounded.

Imagine a 300px wide slider with 546 data points on it - there is no way to catch every point on that slider with dragging a mouse. In your case, if you fit 12 points on 700px and use a mouse coordination to capture those points, you are bound to stumble upon an approximation at some point.

If you really need a case where you have to register every single step on your way - I suggest put a control counter in the slide() method and check if the mouse movement counted for every step on the range and otherwise - fire the missing steps with js.

Made a jsFiddle example from your demo and my imaginary 300px wide slider to demonstrate one way for dealing with this limitation (it also skips row #1 to fit your example).

...
slide: function (event, ui) {
    if(!counter) counter=$(this).slider( "option", "value" );
    var step=$(this).slider( "option", "step" );
    if(Math.abs(ui.value-counter)>step){
        if(ui.value > counter) for (var i=counter+1;i<=ui.value;i++) addrow(i);
        else if(ui.value < counter) for (var i=counter;i>ui.value;i--) removerow();
    }else{
        if (ui.value > counter) addrow(ui.value);
        else if (ui.value < counter) removerow();                
    }
    counter = ui.value;
}
...

Upvotes: 1

Related Questions