Jquery UI Slider - Input a Value and Slider Move t

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

I've done some work around the jQuery UI slider to make it accept values from a textbox, it may not be exactly what you were after but could help:

http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html

Answer 2

$slider = $("#slider");
            $("#amountMin").blur(function () {      
              $slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()) ) );
              $(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val())));

            });
            $("#amountMax").blur(function () {
              $slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val()) ) );                              
              $(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val())));
            });

I just used martin's code and updated the id to #slider also added the math.max as he suggested so the sliders won't overlap.

Answer 3

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.