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

Question

我的网站上有一个范围滑块，用于显示最小-最大价格范围。 滑块的两侧是两个文本输入框。 我创建了一个带有滑块的回调函数，该函数根据滑块中的值更改调整文本框的 val。

同时，我还想根据文本框值的变化来调整滑块的值。 现在，我在文本输入上绑定的更改（也尝试了键控）事件不会更改两个范围滑块手的值（位置）。 这是怎么回事？

$('.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 文档，slider('values') 将 index 作为第二个参数，将值作为第三个参数。试试这个：

$('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模板吗？
• 在类名中使用下划线通常不是一个好主意。使用 - 而不是 _ 。

修复：

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/