I was able to make dual range slider by placing slider on top of each other on jQuery Mobile framework.

Also javascript is set so that left thumb doesn't go above right one.

However that function is a bit buggy and I was wondering if anyone had a good solution to this problem.

Below is an example:

$('#buying_slider_min').change(function() {
    var min = $(this).val();
    var max = $('#buying_slider_max').val();
    if(min > max) {
      $('#buying_slider_max').val(min);
      $('.maxBuyingSlider').slider('refresh');  
    }
});
$('#buying_slider_max').change(function() {
    var min = $('#buying_slider_min').val();
    var max = $(this).val();
    if(min > max) {
      $('#buying_slider_min').val(max);
      $('.minBuyingSlider').slider('refresh');  
    }
});

Check it HERE

I was able to make dual range slider by placing slider on top of each other on jQuery Mobile framework.

Also javascript is set so that left thumb doesn't go above right one.

However that function is a bit buggy and I was wondering if anyone had a good solution to this problem.

Below is an example:

$('#buying_slider_min').change(function() {
    var min = $(this).val();
    var max = $('#buying_slider_max').val();
    if(min > max) {
      $('#buying_slider_max').val(min);
      $('.maxBuyingSlider').slider('refresh');  
    }
});
$('#buying_slider_max').change(function() {
    var min = $('#buying_slider_min').val();
    var max = $(this).val();
    if(min > max) {
      $('#buying_slider_min').val(max);
      $('.minBuyingSlider').slider('refresh');  
    }
});

Check it HERE

• javascript
• jquery
• html
• jquery-mobile

• try this:jsfiddle/NkjQr/6 – Wahtever Commented Feb 11, 2012 at 2:22
• thanks for that but the thumbs do not reset for this? – John Kim Commented Feb 11, 2012 at 3:23

4 Answers 4

Modify the script part like this:

$('#buying_slider_min').change(function() {
    var min = parseInt($(this).val());
    var max = parseInt($('#buying_slider_max').val());
    if (min > max) {
        $(this).val(max);
        $(this).slider('refresh');
    }
});
$('#buying_slider_max').change(function() {
    var min = parseInt($('#buying_slider_min').val());
    var max = parseInt($(this).val());

    if (min > max) {
        $(this).val(min);
        $(this).slider('refresh');
    }
});

Updated fiddle - http://jsfiddle/NkjQr/12/

Edit - Code explanation:

1) The value of the slider taken using val() method is a string and earlier you were paring those strings,wherein you should be paring numbers.Since strings were pared,the code was not working the way it should be.Converted the strings to number and then did the min and max parison.

2) If slider_min value goes beyond slider_max value,slider_min value should be kept at slider_max value.Similarly if slider_max value goes under slider_min value,slider_max value should be kept at slider_min value.These are handled within the respective if statements

I think sliders should work like this:

http://jsfiddle/NkjQr/387/

I updated http://jsfiddle/NkjQr/12/ with jQuery Mobile 1.2 and the sample still seems to work fine: http://jsfiddle/fbGV4/1/

                    <a class='filename' target="_blank" href="http://code.jquery./mobile/1.2.0/jquery.mobile-1.2.0.css" title="http://code.jquery./mobile/1.2.0/jquery.mobile-1.2.0.css">

I updated the current js fiddle to work with unlimited slider handles and updated to jQuery mobile 1.3.1. check it out below.

http://jsfiddle/NkjQr/1781/

Tested with Jquery 1.9.1 and Jquery Mobile 1.3.1

html

<div class="priceRangeInfo">
      <label for="buying_slider_min">Price</label>
          <input type="range" name="buying_slider_1" id="buying_slider_1" slider="1" class="BuyingSlider " value="0" min="0" max="100" />
          <input type="range" name="buying_slider_2" id="buying_slider_2" slider="2" class="BuyingSlider" value="80" min="0" max="100" data-track-theme="e"/>
          <input type="range" name="buying_slider_3" id="buying_slider_3" slider="3" class="BuyingSlider" value="100" min="0" max="100" data-track-theme="e"/>
</div>

Javascript

var handles = 3;
$('.BuyingSlider').change(function() {
    var currentval = parseInt($(this).attr("slider"));
    if(currentval == 1){
        var min_num = 1;
        var min = 0;
    }else{
        var min_num = currentval-1;
        var min = parseInt($('#buying_slider_'+min_num).val());
    }
    if(currentval == handles){
        var max_num = handles;
        var max = 100;
    }else{
        var max_num = currentval+1;
        var max = parseInt($('#buying_slider_'+max_num).val());
    }
    var current = parseInt($('#buying_slider_'+currentval).val());
    if (current > max) {
        $(this).val(max);
        $(this).slider('refresh');
    }
    if (current < min) {
        $(this).val(min);
        $(this).slider('refresh');
    }
});

CSS

.ui-slider-track{
    width: 300px;
}
.priceRangeInfo{
    position: relative;
    height: 30px;
    margin-top: 60px;
}
.priceRangeInfo label{
    position: absolute;
    top: -30px;
    left: 10px;
}                            /* moves label field */
.priceRangeInfo #buying_slider_1{
    top: -40px;
    position: absolute;
    left: 100px;
}       /* moves first input field */ 
.priceRangeInfo #buying_slider_2{
    top: -40px;
    position: absolute;
    left: 170px;
} 
.priceRangeInfo #buying_slider_3{
    top: -40px;
    position: absolute;
    left: 240px;
}      /* move second input field */ 
.priceRangeInfo div.ui-slider{
    position: absolute;
}                   /* move both sliders - adressing 1st slider with CSS is hard */ 
.priceRangeInfo div:last-child{
    position: absolute;
    left: 0px;
}