Jquery 测量滑块移动之间的变化

我有一个滑块，它的值可以改变图像的亮度

$("#brightSlider").slider({
            value: 0,
            min: -20,
            max: 20,
            step: 0.1,
            slide: function(event, ui) {
                    var curVal = ui.value;
                    $('#amount').text(curVal); // show slider value 
            },
            stop: function(event, ui) { // when slider stops, perform the function
                    var curVal2 = ui.value;
                    Caman('#example', function () { 
                        this.brightness(curVal2); // add brightness
                        this.render(); // render it
                    });

            }
    });

现在，每次滑块停止时都会添加亮度，因此它停止在10，值10将添加到亮度。然后再稍微停在15，15被加到亮度上。 因此，在这两张幻灯片之后，图像的亮度实际上增加了25，10和15

它实际上应该做的是加10，然后再加5，把总数加到15，而不是加15。因此，如果第二张幻灯片下降到-5，它应该从亮度中扣除-5，但它会做的是加上5（原来的10-5）

我可以在渲染之间恢复图像，但这会在图像恢复到正常状态时创建一个闪光，这非常难看

---

问题是否有办法测量幻灯片之间的差异？

您可以像这样跟踪上一个值：

var previousValue = 0;
$("#brightSlider").slider({
    value: 0,
    min: -20,
    max: 20,
    step: 0.1,
    slide: function (event, ui) {
        var curVal = ui.value;
        $('#amount').text(curVal); // show slider value 
    },
    stop: function (event, ui) { // when slider stops, perform the function
        var curVal2 = ui.value;

        //When the slider stops, calculate the difference between the previous
        //value and the current value. After that, set the value of the previous
        //value to be the current value.
        var difference = curVal2 - previousValue;
        previousValue = curVal2;

        Caman('#example', function () {
                this.brightness(difference); // add brightness
                this.render(); // render it
        });

    }
});

---

这是我想出的答案，非常简单

$("#slider").slider({
    start: function(event, ui) {
        var start = ui.value;
    },
    stop: function(event, ui) {
        var end = ui.value;
        var howMuchMoved = end-start;
    }
});

---

我尝试过以上的解决方案，但对我不起作用。所以我每次都设法加载原始图像，这样亮度就可以是正确的

var previous = 0;
$("input[type=range]").change(function () {

    //span value update
    var newValue = this.value;
    var id = $(this).attr("id");
    $("span[id=" + id + "]").html(newValue);

    //updateImage();
    var difference = newValue - previousValue;
    previousValue = newValue;
    if (id == "brightness") {
        Caman("#image", function () {
            this.brightness(newValue);
            this.render();
        });
    }
});

这种方法是使用原始图像：

$("input[id=brightness]").change(function () {
    Caman("#image", function () {
        setOriginal();
        var brightness = $("span[id=brightness]").text();
        //alert(brightness);
        this.brightness(brightness);
        this.render();
    });
});

---

但是，如果我想同时对同一图像应用多个过滤器，这种方法不起作用=/

这很接近但不正确-如果将滑块向上翻转到20，然后向下翻转到-20，当差分变量应仅显示为时，它显示为-40-20@DarrenSweeney然后，您需要跟踪初始值，并根据该值而不是之前的值执行所有计算。这是对问题的回答还是另一个问题的回答？不清楚。。。如果你有一个问题，请回答一个，否则你能让这个更像一个答案吗？这是一种答案；我试着去做上述的解决方案，但它们对我不起作用。