JQuery UI Slider - enter value and slider Move to location

Question

I was wondering if anyone found a solution or an example to actually fill in the input field of the slider and slide it into the corresponding position onBlur (). Currently, as we all know, it is simply updating this value with the help of which you are located. Therefore, in some respects I am trying to change 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 it looks like they made a try. However, references to the results do not exist. I hope there may be a solution.

I know that Filament has redesigned the slider to handle select (drop down) values, and it works flawlessly. Therefore, the goal would be to do the same, but with an input text field.

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 a value with this, 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 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 need to use Math.min/max to make sure that one value does not pass the other, since the installer does not seem to prevent this.

You were almost there when you used $("#slider-range").slider("values", 0) to get each value. Many jQuery have a get / set convention in which an extra parameter is used to set the value.

Answer 2

I did some work with the jQuery UI slider to get it to accept values ​​from a text field, maybe this is not quite what you need, but it may help:

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

Answer 3

 $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 the martin code and updated id to #slider, also added math.max as he suggested so that the sliders do not overlap.