jQuery Мобильный слайдер с двумя диапазонами работает, но глючит

Question

Мне удалось сделать слайдер с двумя диапазонами, поместив слайдер друг на друга на jQuery Mobile Framework.

Также javascript установлен так, что левый большой палец не поднимается выше правого.

Однако эта функция немного глючит, и мне было интересно, есть ли у кого-нибудь хорошее решение этой проблемы.

Ниже приведен пример:

$('#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');  
    }
});

Проверкаэто ЗДЕСЬ

Answer 1

Изменить часть скрипта следующим образом:

$('#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');
    }
});

Обновленная скрипка - http://jsfiddle.net/NkjQr/12/

Редактировать - Объяснение кода:

1) Значение полученного ползункаИспользование val() - это строка, и раньше вы сравнивали эти строки, в которых вы должны сравнивать числа. Поскольку строки сравнивались, код работал не так, как должно быть. Преобразовал строки в число, а затем выполнил операции min имаксимальное сравнение.

2) Если значение slider_min выходит за пределы значения slider_max, значение slider_min должно сохраняться в значении slider_max. Аналогично, если значение slider_max идет ниже значения slider_min, значение slider_max должно сохраняться в значении slider_min.соответствующие if заявления

Answer 2

Я думаю, что ползунки должны работать так:

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

Answer 3

Я обновил http://jsfiddle.net/NkjQr/12/ с помощью jQuery Mobile 1.2, и образец все еще работает нормально: 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

Я обновил текущую скрипту js для работы с неограниченным количеством ползунков и обновился до jQuery mobile 1.3.1. проверьте это ниже.

http://jsfiddle.net/NkjQr/1781/

Протестировано с Jquery 1.9.1 и 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;
}