Want to bind an input field to a jquery-ui slider handle

Posted by BFTrick on Stack Overflow See other posts from Stack Overflow or by BFTrick
Published on 2010-05-18T19:37:52Z Indexed on 2010/05/18 19:40 UTC
Read the original article Hit count: 335

Filed under:
|
|
|
|

hello,

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: http://stackoverflow.com/questions/1330008/jquery-ui-slider-input-a-value-and-slider-move-to-location

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jquery-ui