Demo of Changing color by using Slider using JQuery
CSS
<style>
#c1 {
color: #006;
background-color: #aaa;
font-size: 25px;
padding: 1em;
text-align: center;
width: 80px;
height: 80px;
}
</style>
HTML
<div id='d1'>0</div> <div id="slider"></div>
<div id="c1">R</div>
JQuery
<script>
$(document).ready(function() {
//////////////////////////
$(function() {
$( "#slider" ).slider({
range: "max",
min: 1,
max: 255,
slide: function(event, ui) {
// alert(ui.value);
var rc=ui.value;
$('#d1').html(ui.value);
$( "#c1" ).animate({ backgroundColor: "rgb( " + rc + ", 0,0 )"},1);
}
});
});
////////////////
})
</script>