Question

I want to bind an input field to the jquery-ui slider handle. So whenever one value changes I want the other value to also change. Ex: if someone types 1000 into the minimum value input field I want the lower slider handle to move to the 1000 mark. Also if the user drags the lower slider handle to 1000 the input field should reflect that.

Making the slider reflect the changes in the input field is easy:

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

I just need help making the text fields mimic the 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 – Input a Value and Slider Move to Location

Answer 1

Take a careful look at the example code on JQuery UI’s page about the range slider.

You can access the values that the slider has through the ui object.
such as:

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