Question

i’ve been stuck in this loop for a while. Basically i have a slider that performs some action when the slider values changes. First thing i do is make a check, and if that check doesn’t pass, i need to reset the value of the slider. But resetting the value of the slider changes it!And so i’m stuck. Here is my code:

Slider:

    $(element).slider({
        min: 0,
        max: 10,
        step: 1,
        value: initialValue,
        animate: false,
        slide: _updateOnSlide,
        change: _performAction
    }); 

var _performAction = function(evt, ui){
    if (CT.travel.atLeastOneStepPresent()){
        var id = $(this).attr("id");

        _updateOnSlide(evt, ui);

        if (id != "travelTime"){//se è il tempo non aggiorno


            CT.makeQuery();

        }
        CT.timeline.update();
    }else{
        alert("you can't do this");
        $(this).slider("value", 0);
        _updateOnSlide(evt, ui);
    }
}

The problem is that $(this).slider("value", 0); triggers another change event!
Anyone knows how to solve this?

I need to use the change function because i’m changing the values of the slider by clicking buttons, not by sliding it.

EDIT – evt.originalEvent is always undefined for me (if i cosole.log it like this console.log(evt.originalEvent)) but for some strange reason i see it if i console.dir it. But unfortunately it doesn’t solve the problem, i add here the part of my code that vhanges the value of the slider (pardon me i forgot to do that earlier)

            $('.plus').click(function(event){
                var sliderCurrentValue = $( this ).next().slider( "value" );
                $(this).next().slider( "value", sliderCurrentValue + 1 );
            });

As you can see, the value is changed programmatically the first time and so the check on the evt.originalEvent would be useless anyway.

EDIT 2 – i’ve found a way out of this but i hope there is a better way:

        alert("you can't do this");
                    //destroy the slider
        $(this).slider("destroy");
                    // recreate the slider
        _makeSelector(this);

I think it could also work if i just removed the function binded to the “change” event and reset the value, but i hope there is a better way of doing this!

Answer 1

Check for the existence of evt.originalEvent.

If it’s there, the change was initiated by the user using its own controls. If it’s not, it indicates a program initiated change.

EDIT – probably the easiest solution is to temporarily .unbind() the change handler before you reset the slider, and then .bind it again immediately afterwards.