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 r

Answer 1

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

      Price
          
          
          

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;
}