CODEWITHSUNDEEP
jqueryjquery-ui
StudioTime
StudioTime

Reputation: 23999

Measure the CHANGE between slider movements

I have a slider which the value changes the amount of brightness added to an image.

$("#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
                    });

            }
    });

Now, the brightness is added each time the slider stops, so it stops at 10, value 10 is added to the brightness. Then a little more it stops at 15, 15 is added to the brightness. So, after these two slides what the image has had is effectively 25 added to the brightness, a 10 and a 15.

What it actually should be doing is adding 10, then adding 5 to take the total to 15, not adding 15. Consequently if the second slide was down to -5, it should deduct -5 from brightness but what it would do is add 5 (original 10 - 5)

I can revert the image between renders but this creates a flash while the image reverts back to normal which is just plain ugly.

QUESTION Is there a way to measure the difference between slides?

Upvotes: 2

Views: 191

Answers (3)

xatz
xatz

Reputation: 425

I've tried the above solutions but they didn't work for me. So I managed to load everytime the original image so the brightness could be the correct one.

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();
        });
    }
});

And this way is using the original image:

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

But this way doesn't work if I want to apply multiple filters the same time to the same image =/

Upvotes: 0

StudioTime
StudioTime

Reputation: 23999

This is the answer I came up with, very simple!

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

Upvotes: 0

Vivin Paliath
Vivin Paliath

Reputation: 95578

You can keep track of the previous value like so:

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
        });

    }
});

Upvotes: 1

Related Questions