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

我在我的网站上有一个最小-最大价格范围的范围滑块。滑块两侧有两个文本输入框。我创建了一个带有滑块的回调函数，该函数根据滑块内的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()]);
    }   
});

• 对于多手柄滑块，您需要使用

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

演示：

• 对于多手柄滑块，您需要使用

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

演示：

根据

滑块（“值”）

将索引作为第二个参数，值作为第三个参数。试试这个：

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

根据滑块（“值”）将索引作为第二个参数，值作为第三个参数。试试这个：

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

---

嗨，马特，这在很多层面上都是一个很好的答案。它奏效了，但有一些有趣的评论。首先，parseInt不是必需的。其次，{方括号是Django模板变量。我根据用户以前的搜索设置了范围值。最后，我在文本输入事件处理程序中创建了一个额外的条件。如果$lower.val（）>$upper.val（）-->$upper.val（[$lower.val（）]）。否则，滑块在错误的方向上重叠，导致了古怪的行为。我更改了文本输入处理程序的逻辑，你看到最新版本了吗？嗨，马特，我刚才看到了更改。我看到了你的工作方式，但我看到了（见上面的编辑）似乎需要更少的代码。通常很好奇为什么一个会比另一个更好。还有，CSS中有用的链接re：下划线。我希望在我创建一个完整的网站之前阅读这些内容。这是一个在多个级别上的很好的答案。它很有效，但有一些有趣的注释。首先，parseInt不是必要。其次，{括号是Django模板变量。我根据用户以前的搜索设置了范围值。最后，我在文本输入事件处理程序中创建了一个额外的条件。如果$lower.val（）>$upper.val（）-->$upper.val（[$lower.val（）]）。否则，滑块在错误的方向上重叠，导致了古怪的行为。我更改了文本输入处理程序的逻辑，你看到最新版本了吗？嗨，马特，我刚才看到了更改。我看到了你的工作方式，但我看到了（见上面的编辑）似乎需要更少的代码。通常很好奇为什么一个会比另一个更好。还有，有用的链接re：CSS中的下划线。我希望在我创建一个充满类和ID下划线的整个网站之前读到这篇文章。我想马特比你强了一点。但这是一个很好的信息，尽管他做了，就像我在谈论to单击“提交”按钮，但既然我已经键入了，我想我还是会发布它的。：）谢谢达斯。我想马特比你先了一步。但这是一个很好的信息，尽管他做了，就像我正要单击“提交”按钮一样，但既然我已经键入了，我想我还是会发布它。：）