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

D

2

14

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?

Diphase answered 19/3, 2013 at 19:40 Comment(7)

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. – Certificate 19/3, 2013 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? – Diphase 19/3, 2013 at 19:43

Change() probably triggers off of slider panel position, not slider ID. – Languid 19/3, 2013 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.. – Diphase 19/3, 2013 at 19:44

I didn't quite get what you said..:) – Diphase 19/3, 2013 at 19:45

But isn't the change value supposed to do it for us? Else, what is the difference between change and stop events? – Diphase 19/3, 2013 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. – Iquique 19/3, 2013 at 19:59

L

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

Languid answered 19/3, 2013 at 19:51 Comment(0)

U

1

Just try.

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

Urdar answered 19/3, 2013 at 20:54 Comment(2)

How does this detect a change in value? – Languid 19/3, 2013 at 20:55

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.. – Diphase 19/3, 2013 at 21:28

Recommended topics

Hot tags