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

Question

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

同时，我还想根据文本框值的变化来调整滑块的值。现在，我在文本输入上绑定的更改（也尝试了 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 文档，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'< /code> 采用以下格式：

  .slider( "值" , 索引 , [值] )
  

• 在根据文本框设置滑块值时，您可能希望强制执行 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/