Slider

 

This is a short entry on how to update jQuery's Slider immediately from an input field whenever it changes. There are quite a lot of events that we need to catch. The normal change event just doesn't cut it as it only fires when the the input field looses its focus. To allow us to update the jQuery Slider immediately, we need to use the keyup event. Every time a key is released the values of our field are immediately sent to the jQuery Slider. The other events include the input event which fires when the interface changes the value of our field. Because of Internet Explorer, which is buggy with this event, we have also added propertychange. When the cut and paste events trigger probably comes as no surprise.

Updating jQuery Slider Value immediately upon Input Change

jQuery( ".myInputs" ).bind("propertychange keyup input cut paste", function(event){
        jQuery( "#slider-id" ).slider( "values", [ jQuery( "#minimumValue" ).val(), jQuery( "#maximumValue" ).val() ] );
    });

We have bound the event to the elements with the class myInputs, in this case our input fields for the minimum and the maximum values. Whenever one or more of the events is triggered, the jQuery Slider values (I have a minimum and a maximum value) are updated with the values of our input fields. We don't have to loose focus for the slider to update, thanks to our keyup event. Marking the contents of a field and cutting it out or pasting content also triggers events mentioned above. All in all a sound solution to the problem.