Single Slider with two knobs with their own ranges

Question

I have a small requirement.. Please someone help me
I have this code to make one slider with two knobs using JQuery UISlider, but i want both to be having their own ranges.
For example if the total range is 1-100, first knob should slide between only 1-50 and second one should slide between 51-100.

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

score 2 · Accepted Answer · answered Jun 11 '11 at 14:18

You can do something like this:

$("#slider-range").slider({
    range: true,
    min: 1,
    max: 100,
    values: [1, 100],
    slide: function(event, ui) {
        // Make sure first handle doesn't go over 50
        if ( ui.value == ui.values[0] && ui.value > 50 ) {
            return false;
        }
        // Make sure second handle doesn't go below 51
        if ( ui.value == ui.values[1] && ui.value < 51 ) {
            return false;
        }
        $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
    }
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));

Example: http://jsfiddle.net/petersendidit/kbHbc/1/

need help with this one http://stackoverflow.com/questions/9480039/jquery-ui-slider-with-two-handles-with-input-from-two-text-box — bala3569, Feb 28 '12 at 11:54

score 0 · Answer 2 · answered Aug 19 '11 at 12:07

jQuery UI slider extension - future reference

I've written an extension for the existing jQuery UI slider widget that (also) does what you require. Since code is maintained I'm not pasting it in here since you can always get the latest version on my blog.

What it supports

minimum and maximum allowed range size
lower range boundary maximum value - this is what you needed
upper range boundary minimum value - this one as well
automatic range sliding - when one handle reaches maximum range size it drags the other handle along keeping range size at max value

Single Slider with two knobs with their own ranges

2 Answers2

jQuery UI slider extension - future reference