Question

As far as I know the jQuery UI Range slider should move the nearest dragger/handle if one clicks on the slider. However in my case this does not seem to happen and only the left dragger is being moved. As an example you can see the following code:

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 4,
        step: 1,
        values: [ 0, 4 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});

And you can see this jsFiddle of that example: http://jsfiddle.net/dZ7Yg/

If you try to move the right dragger/handle to the second point by simply clicking on the slider, you’ll not be able to do that. Once the right dragger reaches the third point, it will not move to the second one if you even click 1px before it, it will move the left one in any case.

Could anybody help me with this? How can this be resolved?

Thanks for helping!

Answer 1

The click on those bar is little tricky, but I think below is how it behaves,

Condition 1: The left slider has precedence over right slider.

Condition 2: The slider moves to the next position when you click closer to the next position. For ex: In the below image, the left slider will move to P1 when you click anywhere in the blue rectangle enclosing P1.

Condition 3: Clicking anywhere closer to Slider does nothing.

Remember those conditions and read below,

When you move right slider to P2, and now you want to move right slider from P2 to P1, however left slider takes precedence and moves it to P1.

Now Again clicking on P1 doesn’t move right slider because the left slider is on P1 and as per condition 3 it does nothing.

To me it looks like jQuery slider for range is not behaving as we expect.