CODEWITHSUNDEEP
jquery-ui-slider
cycero
cycero

Reputation: 4771

How to make the range between slider handles fixed?

I'm using jQuery UI Slider in one of the projects I'm working on and need to somehow limit the range which can be selected by the user. There are 2 draggers on the slider. Values, say [0, 100], left drag is on 50, the right drag is on 55. When the left drag is moved to 45 I need to move the right drag to 50 so the difference is always 5. The same when I change the right dragger position. For example, if the right dragger is moved to 60, the left dragger should be moved to 55. I'm trying to do in the following way:

if((ui.values[ 1 ] - ui.values[ 0 ]) > 5) {
    $("#slider").slider("values", 0, ui.values[ 0 ] + 5);
    $("#slider").slider("values", 1, ui.values[ 1 ]);
}

However this doesn't seem to work right.

Can anybody tell me how can this be achieved?

Thanks!

Upvotes: 2

Views: 686

Answers (1)

Soundar
Soundar

Reputation: 2589

Try this.. this must works..

$("#slider-range").slider({
    slide: function(e, ui){
        var index = $(this).children("a").index(ui.handle);
        var next = (index == 0) ? 1 : 0;
        if((ui.values[ 1 ] - ui.values[ 0 ]) >= 5) {
            var newVal = (index == 0) ? ui.values[ 0 ] + 5 : ui.values[ 1 ] - 5;
            $("#slider-range").slider("values", next, newVal);
        }
    }
});

Upvotes: 2

Related Questions