How to change position of slider without calling change/slide methods?

Question

I have a slider. When the user slides it, it adjusts the gamma of an image. Here is the code, very straightforward, works perfectly.

$('#gammaSlider').slider({
            max: 125,
            min: -125,
            value: 0,
            slide: function () {
               //stuff to adjust gamma of image
            },
            change: function () {
                //stuff to adjust gamma of image
            }
        });

However, when the user loads a different image, I want to programmatically set the slider to the value it should be at for the new image (a.k.a. allow flipping back and forth between multiple pages with separate gamma settings). To be clear, the newly loaded image's gamma is already at whatever value it was last set to. I am only seeking to adjust the UI to match the new image's value. For instance, if I increase page 2's gamma, then flip to page 1, I need to move the slider back to default from its increased position, and I need to do it without the code thinking I'm trying to decrease the gamma.

When I do this using the following, there's a problem:

$('#gammaSlider').slider('value', gamma);

The problem is that this is triggering the slide and change calls that I set up for the slider in the original declaration above, causing it to try to reload the image redundantly with new gamma values. Is there a way to change the slider programmatically WITHOUT triggering those calls?

Answer 1

You can use the fact that you can differentiate between a user change and a programmatic change via event.originalEvent. For example, you can have code that gets executed when the user makes a change, and different code that gets executed when you make a programmatic change like changing the value. Since changing the value will trigger the slider's change event, you can put your gamma change code within the block that only is triggered on a user's change, not a programmatic change:

change: function (event) {
    if (event.originalEvent) {
        //stuff to adjust gamma of image ONLY WHEN USER CHANGES THE SLIDER
        console.log('user change');
    }
}

You can see in this jsFiddle example that the slider's value is changed to 50, yet no log message is generated unless the user moves the slider. If you comment out the if condition you'll see the log message gets generated not only after the user changes the slider's value, but when you make a change to the value programmatically.