Question

我的网站上有一个范围滑块，用于最小 - 最大价格范围。滑块的两侧是两个文本输入框。我用滑块创建了一个回调函数，它根据滑块内的val变化调整文本框的val。

同时，我还想根据文本框的更改来调整滑块的值。现在，我在文本输入上绑定的更改（也尝试过的keyup）事件不会更改两个范围滑块指针的值（位置）。这有什么不对？

$('.price_slider').slider({orientation:"horizontal",range:true, animate:200,min:0,max:10000, step:100,value:0,values:[{{min_rent}},{{max_rent}}], slide:function(event,ui){
    $('input#lower_bound').val(ui.values[0]);
    $('input#upper_bound').val(ui.values[1]);
    }
    });


$('input#lower_bound').change(function(){
    $('.price_slider').slider("values",[$(this).val(),$('input#upper_bound').val()]);
});


$('input#upper_bound').change(function(){
    $('.price_slider').slider("values",[$('input#lower_bound').val(),$(this).val()]);
});

编辑 -

马特，我看到了你的修改。只是好奇你的版本是否比我的更高效。我的确似乎有效，但我显然不是专家：

    $lower.add($upper).change(function () {
    var lowEnd=parseInt($lower.val());
    var highEnd=parseInt($upper.val());

    if(highEnd>lowEnd){
        $slider.slider('values', 0, parseInt($lower.val(), 10));
        $slider.slider('values', 1, parseInt($upper.val(), 10));
    }
    else{
        $slider.slider('values', 0, parseInt($lower.val(), 10));
        $slider.slider('values', 1, parseInt($lower.val(), 10));
        $upper.val([$lower.val()]);
    }   
});

Answer 1

根据jQuery UI documentation，slider('values')将索引作为第二个参数，将值作为第三个参数。试试这个：

$('input#lower_bound').change(function(){
    $('.price_slider').slider("values",0,$(this).val());
    $('.price_slider').slider("values",1,$('input#upper_bound').val());
});


$('input#upper_bound').change(function(){
    $('.price_slider').slider("values",0,$('input#lower_bound').val());
    $('.price_slider').slider("values",1,$(this).val());
});

Answer 2

对于多手柄滑块，您需要使用'values'而不是'value'（您正在做的），但'values'采用以下格式：
```
.slider( "values" , index , [value] )
```
您可能希望在根据文本框设置滑块值时强制执行max >= min。
您错误地将初始值传递给.slider()，我不知道{{...}}废话来自哪里（是jQuery模板吗？）。
一般是not a great idea to use underscores in class names。使用-代替_。

修正：

var $slider = $('.price-slider'),
    $lower = $('#lower_bound'),
    $upper = $('#upper_bound'),
    min_rent = 1000,
    max_rent = 9000;

$lower.val(min_rent);
$upper.val(max_rent);

$('.price-slider').slider({
    orientation: 'horizontal',
    range: true,
    animate: 200,
    min: 0,
    max: 10000,
    step: 100,
    value: 0,
    values: [min_rent, max_rent],
    slide: function(event,ui) {
        $lower.val(ui.values[0]);
        $upper.val(ui.values[1]);
    }
});

$lower.change(function () {
    var low = $lower.val(),
        high = $upper.val();
    low = Math.min(low, high);
    $lower.val(low);
    $slider.slider('values', 0, low);
});

$upper.change(function () {
    var low = $lower.val(),
        high = $upper.val();
    high = Math.max(low, high);
    $upper.val(high);
    $slider.slider('values', 1, high);
});

演示：http://jsfiddle.net/mattball/pLP2e/

具有关联文本输入事件的Jquery UI范围滑块（失败）

2 个答案: