Want to associate an input field with a jquery-ui handle

Question

I want to bind an input field to a jquery-ui handle. Therefore, when one value changes, I want to change another value. Example: if someone enters 1000 in the input field of the minimum value, I want the bottom slider to move to the mark of 1000. Also, if the user drags the bottom slider to 1000, the input field should reflect this.

The creation of the slider reflects the changes in the input field:

$(minYearInput).blur(function () { $("#yearSlider").slider("values", 0, parseInt($(this).val())); }); $(maxYearInput).blur(function () { $("#yearSlider").slider("values", 1, parseInt($(this).val())); }); 

I just need help so that the text fields mimic a slider.

 $("#yearSlider").slider({ range: true, min: 1994, max: 2011, step: 1, values: [ 1994 , 2011 ], slide: function(event, ui) { //what goes here? } }); 

Any ideas?

A similar question from this site: JQuery UI Slider - enter value and slider Move to location

Answer 1

Take a look at the sample code on the jQuery interface page about the range slider .

You can access the values ​​that the slider has through the ui object. eg:

 function(event, ui) { //what goes here? $(minyearInput).val(ui.values[0]); $(maxyearInput).val(ui.values[1]); }