I am looking to synchronize an input field with the jquery-ui slider handle. The goal is to have changes in one value reflected in the other. For example, if a user enters 1000 into the minimum value input field, I want the lower slider handle to move to the 1000 mark. Similarly, if the user moves the lower slider handle to 1000, the input field should update accordingly.
Adjusting the slider based on the input field is straightforward:
$(minYearInput).blur(function () {
$("#yearSlider").slider("values", 0, parseInt($(this).val()));
});
$(maxYearInput).blur(function () {
$("#yearSlider").slider("values", 1, parseInt($(this).val()));
});
However, I need assistance with making the text fields follow the slider adjustments.
$("#yearSlider").slider({
range: true,
min: 1994,
max: 2011,
step: 1,
values: [ 1994 , 2011 ],
slide: function(event, ui) {
//what should be included here?
}
});
Do you have any suggestions or solutions to achieve this?
You may find a related question on this site helpful: Jquery UI Slider - Input a Value and Slider Move to Location