Dynamically change the color of an HTML range element

[winlonghorn]

I was wondering if there is a way to dynamically change the color of an HTML range element. For example, let's say I have 3 sliders (1 for red, 1 for green, 1 for blue). I want to change the intensity of each color on the slider based on the value of the slider. An example of what I have so far is located at http://jsfiddle.net/aa5kh/ 

[winlonghorn]

Does any body have any ideas regarding this issue? 

 

EDIT: Oops! I just noticed that the fiddle isn't there for some reason. I copied the url while I was there, but I guess I had to save it. I will recreate it. Sorry for the confusion!

[winlonghorn]

Ok, here is the url for the my code on jsfiddle http://jsfiddle.net/winlonghorn/bataA/1/

[nyolc8]

My quick idea: http://jsfiddle.net/bataA/7/

The sliders change the text color.

 

Notice that I used rgb() css property which is not much compatible with old browsers. But this is the easiest I think.

 

edit: it looks like in Chrome the color only updates when I let go the mouse button, but in IE 11 it updates as the slider moves.

 

edit2: I modified the jquery so it updates the color in Chrome immediatelly as well. http://jsfiddle.net/bataA/15/

[Dogward]

HTML :

<input type="range" id="red" min="0" max="255" />
<input type="range" id="green" min="0" max="255" />
<input type="range" id="blue" min="0" max="255" />
<input type="text" id="color" />

 

CSS :

input[type=range]::-webkit-slider-thumb {
     -moz-appearance: none;
     border-radius: 20px;
     background-color: #FFF;
     box-shadow:
        inset 0 0 16px #B2B200,
        inset 16px 0 20px #FFFF33;
     border: 2px solid #292908;
     height: 20px;
     width: 20px;
}

#color {
width: 100px;
background-color: black;
}
 

JScript :

var r = 0;
var g = 0;
var b = 0;

$('input[type=range]').each(function() {
    $(this).bind('change', function() {
        r = $('#red').val().toString(16);
        g = $('#green').val();
        b = $('#blue').val();
        
        var colorrgb = r+","+g+","+b;
        
        $("#color").css("background-color", "rgb("+colorrgb+")");
        
    });
});

[nyolc8]

If I missunderstood you and you actually want to change the sliders colors, then here it is(may look messy but works): http://jsfiddle.net/bataA/45/

[FrostAM]

Why not change the opacity? 

 

http://jsfiddle.net/bataA/66/

 

Still needs some tweaking, but it gives you the general idea. 

[winlonghorn]

  On 21/05/2014 at 12:58, nyolc8 said:

If I missunderstood you and you actually want to change the sliders colors, then here it is(may look messy but works): http://jsfiddle.net/bataA/45/

 

That is very close to what I want, but I want to change the thumb within the control to that color. Thank you for your help so far. I appreciate it!