Jquery UI Slider - Input a Value and Slider Move to Location

Question

I was wondering if anyone has found a solution or example to actually populating the input box of a slider and having it slide to the appropriate position onBlur() .. Currently, as we all know, it just updates this value with the position you are at. So in some regards, I am trying to reverse the functionality of this amazing slider.

One link I found: http://www.webdeveloper.com/forum/archive/index.php/t-177578.html is a bit outdated, but looks like they made an attempt. However, the links to the results do not exist. I am hoping that there may be a solution out there.

I know Filament has re-engineered the slider to handle select (drop down) values, and it works flawlessly.. So the goal would be to do the same, but with an input text box.

Answer 1

Will this do what you want?

$("#slider-text-box").blur(function() {
  $("#slider").slider('option', 'value', parseInt($(this).val()));
});

Each option on the slider has a setter as well as a getter, so you can set the value with that, as in the example above. From the documentation:

//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);

UPDATE:

For dual sliders you'll need to use:

$("#amount").blur(function () {
  $("#slider-range").slider("values", 0, parseInt($(this).val()));
});
$("#amount2").blur(function () {
  $("#slider-range").slider("values", 1, parseInt($(this).val()));
});

You'll need to use Math.min/max to make sure that one value doesn't pass the other, as the setter doesn't seem to prevent this.

You were almost there when you were using the $("#slider-range").slider("values", 0) to get each value. A lot of jQuery has that kind of get/set convention in which the extra parameter is used to set the value.