CODEWITHSUNDEEP
jquerycssjquery-mobilejquery-slider
WordPress Mike
WordPress Mike

Reputation: 458

Animate Color with jQuery Mobile Slider

Currently, I'm changing the opacity of the background color from 0 to 1 using a range slider with a range of 0 to 10. That was pretty simple to understand.

What I really need to do is fade the color from orange to pink as the slider increases in value. Completely orange would 0 and completely pink would be 10 with a fadeing/tweening effect on all intervals in between. I'm at a loss on how to achieve this.

This is what I have now:

$("#slider").change(function() {

    sVal = $(this).val();

    $(this).next().css("background-color", "rgba(217,80,160," + (sVal * 0.1) + ")");

});

And my demo is here: http://jsfiddle.net/kSP5P/

Upvotes: 0

Views: 730

Answers (1)

ntdb
ntdb

Reputation: 431

The easiest way to do this is to normalize your slider value (divide it by 10, in this case), multiply the difference between two RGB values (orange and pink) by this normalized value, and add it to your base RGB values (pink).

It's super basic and there might be a better way to do it... but it looks good and it works. Here's my version of your code:

// RGB values for orange
orangeR = 255;
orangeG = 165;
orangeB = 0;

// RGB values for pink
pinkR = 217;
pinkG = 80;
pinkB = 160;

$("#slider").change(function() {

    // Normalize the slider value (between 0 and 1)
    sVal = $(this).val() / 10.0;

    // Calculated RGB values for our slider
    currentR = parseInt(pinkR + (orangeR - pinkR) * sVal);
    currentG = parseInt(pinkG + (orangeG - pinkG) * sVal);
    currentB = parseInt(pinkB + (orangeB - pinkB) * sVal);

    // Set the slider background color
    $(this).next().css("background-color", "rgb(" + currentR + "," + currentG + "," + currentB + ")");

});

...and a modified version of your fiddle. Cheers!

Upvotes: 2

Related Questions