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

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

此外，javascript设置为左拇指不在右上方。

然而，这个function有点儿麻烦，我想知道是否有人对这个问题有一个很好的解决方案。

以下是一个例子：

$('#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()方法获取滑块的值是一个字符串，之前您要比较这些字符串，其中您应该比较数字。由于比较了字符串，代码无法正常工作。转换字符串编号然后进行最小和最大比较。

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

我用jQuery Mobile 1.2更新了http://jsfiddle.net/NkjQr/12/ ，样本似乎仍然正常工作： http ： //jsfiddle.net/fbGV4/1/

Answer 4

我更新了当前的js小提琴，使用无限滑块手柄并更新到jQuery mobile 1.3.1。 看看下面。

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

使用Jquery 1.9.1和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; }