jQuery Mobile dual range slider working but buggy

Question

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

Answer 1

I think sliders should work like this:

http://jsfiddle.net/NkjQr/387/

Answer 2

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.net/NkjQr/12/

Edit - Code explanation:

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

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

Answer 3

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

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

Answer 4

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.net/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;
}