如何在不调用更改/滑动方法的情况下更改滑块的位置？

Question

我有一个滑块.当用户滑动它时,它会调整图像的灰度系数.这是代码,非常简单,完美.

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

但是,当用户加载不同的图像时,我想以编程方式将滑块设置为新图像应该处于的值(也允许在具有单独伽玛设置的多个页面之间来回翻转).要清楚,新加载的图像的伽玛已经达到了上次设置的任何值.我只是想调整UI以匹配新图像的值.例如,如果我增加第2页的伽马值,然后翻到第1页,我需要将滑块从其增加的位置移回默认值,我需要在没有代码的情况下执行此操作,我正在尝试降低伽马值.

当我使用以下内容执行此操作时,会出现问题:

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

问题是这是触发我在上面原始声明中为滑块设置的调用slide和change调用,导致它尝试使用新的gamma值冗余地重新加载图像.有没有办法以编程方式更改滑块而不触发这些调用？

Answer 1

您可以使用以下事实:您可以区分用户更改和程序更改event.originalEvent.例如,您可以拥有在用户进行更改时执行的代码,以及在进行编程更改(例如更改值)时执行的不同代码.由于更改值会触发滑块的更改事件,因此您可以将伽玛更改代码放在仅在用户更改时触发的块中,而不是程序更改:

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

您可以在此jsFiddle示例中看到滑块的值更改为50,但除非用户移动滑块,否则不会生成任何日志消息.如果您注释掉if条件,您将看到日志消息不仅在用户更改滑块的值后生成,而且在您以编程方式更改值时生成.