up vote12down votefavorite

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?

   
shareimprove this question
  • 1
    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. – PopulusMar 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. – isherwoodMar 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
  • 3
    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

2 Answers 正确答案

up vote16down voteaccepted
$(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;
    });
});
shareimprove this answer
up vote0down vote

Just try.

$(function() {
    $("#slider").slider({
        slide: function(event, ui) {
            // use ui.value to get a number
            // do your functions
        }
    });
});
shareimprove this answer
  • 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

来自  https://stackoverflow.com/questions/15508922/jquery-ui-slider-change-event-fires-even-when-value-has...