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

Question

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

同时，我还想根据文本框值的变化来调整 slider 的值。现在，我在文本输入上绑定(bind)的更改(也尝试了 keyup)事件不会更改两个范围 slider 指针的值(位置)。这里出了什么问题？

$('.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());
});