jQuery UI slider 'change' event fires even when value has not changed

javascript, jquery, jquery-ui, jquery-ui-slider

Solution

$(function() {
    $("#slider").slider();

    var startPos = $("#slider").slider("value");, 
        endPos = '';

    $("#slider").on("slidestop", function(event, ui) {
        endPos = ui.value;

        if (startPos != endPos) {
            // do stuff
        }

        startPos = endPos;
    });
});

Problem

I am trying to fire an event when a user slides the slider and the value is changed when the sliding stops. As per the jQuery docs, the `change`event would be ideal for this case. So I am trying this out: ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Slider - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { $( "#slider" ).slider({ change:function() { alert("foo"); } }); }); </script> </head> <body> <div id="slider"></div> </body> </html> ``` However, I observe that when I drag the slider to the right and again drag it back to the starting point (the initial position of the slider at page-load), the alert still fires. Is this a jQuery bug? If no, how do I fix this?

Original source