Question

我可以通过在jQuery Mobile框架上将滑块放在彼此顶部来制作双范围滑块。

此外，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');  
    }
});

Check it HERE

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()方法获取的滑块的值是一个字符串，之前您正在比较这些字符串，其中您应该比较数字。由于字符串被比较，代码不能正常工作be。将字符串转换为数字，然后进行最小和最大比较。

2）如果slider_min值超出slider_max值，则slider_min值应保持在slider_max值。同样，如果slider_max值低于slider_min值，则slider_max值应保持在slider_min值。这些值在相应的{{1}内处理}陈述

Answer 2

我认为滑块应该像这样工作：

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

Answer 3

我使用jQuery Mobile 1.2更新了http://jsfiddle.net/NkjQr/12/，样本似乎仍然可以正常工作：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;
}

jQuery Mobile双范围滑块工作但有问题

4 个答案: