與相關文本輸入事件（失敗）的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()]); 
}); 

EDIT--

馬特，我看到了你的修訂。只是好奇，如果你的版本比我的效率更高。礦似乎是工作，但顯然我不是專家：

$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

• 因爲，你需要使用'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/

Answer 2

按照jQuery UI documentation，slider('values')取索引作爲第二PARAM和值作爲所述第三。試試這個：

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