CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-slider
Reddy
Reddy

Reputation: 1385

Single Slider with two knobs with their own ranges

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>

Upvotes: 0

Views: 2074

Answers (2)

Robert Koritnik
Robert Koritnik

Reputation: 105029

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

Upvotes: 0

PetersenDidIt
PetersenDidIt

Reputation: 25620

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/

Upvotes: 2

Related Questions