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

Question

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 changeevent 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?

Working as intended. Change event fires whenever slider changes value, so when you moved it the first time the value of the slider has changed to new value, so when you moved it back, the value has changed again. — Populus, Mar 19 '13 at 19:42
No, what I mean is this: drag it to the right, without releasing it bring back to the initial position (0). So now the event completes, and you are at the value where you was when the drag initiated. So how come this is a `change` event? — SexyBeast, Mar 19 '13 at 19:43
Change() probably triggers off of slider panel position, not slider ID. — isherwood, Mar 19 '13 at 19:44
Of course, it can be done by tapping the value when slider starts through the `start` event, then compare the final value when it stops.. — SexyBeast, Mar 19 '13 at 19:44
But isn't the `change` value supposed to do it for us? Else, what is the difference between `change` and `stop` events? — SexyBeast, Mar 19 '13 at 19:46
The docs are a little ambiguous on this. They say change is "Triggered after the user slides a handle, if the value has changed; or if the value is changed programmatically via the value method." Does that mean it's 1) triggered after the user slides the handle, 2) if the value has changed, or 3) the value is changed programmatically, OR does it mean it's triggered 1) after the user slides the handle and the new value != the old value or 2) the value is changed programmitically? Personally I agree with you and that it seems like a bug. — j08691, Mar 19 '13 at 19:59

isherwood · Accepted Answer · 2017-10-27T14:47:46.813

17

$(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;
    });
});

edited Oct 27 '17 at 14:47

answered Mar 19 '13 at 19:51

isherwood

58,414
16
114
157

score 1 · Answer 2 · answered Mar 19 '13 at 20:54

1

Just try.

$(function() {
    $("#slider").slider({
        slide: function(event, ui) {
            // use ui.value to get a number
            // do your functions
        }
    });
});

answered Mar 19 '13 at 20:54

Haroldo Gondim

156
5

How does this detect a change in value? – isherwood Mar 19 '13 at 20:55
1

Yes, how indeed? I do not want to trigger a function while sliding, I want this: to fire the event when the user has stopped sliding and the current value is different from the one when he started.. – SexyBeast Mar 19 '13 at 21:28

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

2 Answers2