Jquery UI Range Slider with associated Text Input Events (Failing)

I have a range slider on my site for min-max price ranges. On either side of the slider are two text input boxes. I've created a callback function with the slider which adjusts the vals of the text boxes based on a val change within the slider.

At the same time, I would also like to adjust the values of the slider based on changes to th vals of the text boxes. Right now, the change (also tried keyup) event that I'm binding on the text inputs are not changing the values (position) of the two range slider hands. What's wrong here?

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

Matt, I saw your revision. Just curious if your version is more efficient than mine. Mine does seem to be working but I'm clearly not an expert:

    $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(), 1开发者_如何学Go0));
    }
    else{
        $slider.slider('values', 0, parseInt($lower.val(), 10));
        $slider.slider('values', 1, parseInt($lower.val(), 10));
        $upper.val([$lower.val()]);
    }   
});

---

According to the jQuery UI documentation, slider('values') takes index as the second param and value as the third. Try this:

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

---

• For multi-handle sliders, you need to use 'values' rather than 'value' (which you're doing) but 'values' takes this format:

  .slider( "values" , index , [value] )
  

• You probably want to enforce max >= min when setting the slider values based on the textboxes.

• You are passing the initial values to .slider() incorrectly, I don't know where that {{...}} nonsense came from (is that a jQuery template?).
• It's generally not a great idea to use underscores in class names. Use - instead of _.

The fixes:

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

Demo: http://jsfiddle.net/mattball/pLP2e/