JQuery mobile slider input change event

Question

I work with jQuery mobile slider. I can have several sliders on my page, and what happens is that the “change” event fires very often, and not just when the actual input value changes. This is my code:

<div class="questionContent ui-hide-label" data-role="fieldcontain"> <input type="range" class="slider" value="" min="1" max="5" data-highlight="true" name="slider" data-theme="b" /> </div> $('input.slider').each(function() { $(this) .bind('change',function() { console.log('changed') }) }) 

I also created jsFiddle for this: http://jsfiddle.net/EAewE/

Answer 1

The problem is that jQuery in the background changes the value of the input tied to the slider when the mouse is clicked, it moves slightly, etc., so the “change” actually causes frequent because of what it should be.

In jQuery Mobile, you better use a slidestop event that will only fire when the slider stops moving. Please note that this event does not fire when the input value changes programmatically only when the user slider is activated by the user.