Using HTML5’s Range Input Type To Generate Colors At Runtime

In this tutorial we will implement automatic coloring using javascript and HTML5 range input type. Range input type is really a good addition in HTML5. Though at the time of writing this tutorial many browsers don’t support HTML5 range input type. So you will have to use polyfill in order to get it working in all the browsers. You can utilize HTML5’s new elements and attributes to create awesome things. The main concern which I see is browser support for HTML5, as many browsers don’t support HTML5 completely and that’s why most of the people don’t prefer it. But in future you can expect support for HTML5 in all the browsers.



In this tutorial we will build up three sliders for red, green and blue color using range input type. Set min and max value to 0 and 255 respectively. Till now we have used standard HTML5 markup to create all the things and the code goes like this:

<!doctype html>
<head><title>Runtime Coloring Using Javascript and HTML5- InfoTuts</title>
<link rel="stylesheet" href="style.css" />

// Add <header> tag in IE
Create Runtime Coloring Using Javascript and HTML5 - InfoTuts
<div id="main">
<p> Change Color by Sliding RGB Sliders - [Left is 0(Min) and Right is 255 (Max)]</p>
<dt>Red</dt><dd><input type="range" min="0" max="255" id="red" onchange="myfunc();"/></dd></dl>
<dl><dt>Green</dt><dd><input type="range" min="0" max="255" id="green" onchange="myfunc();"/></dd></dl>
<dl><dt>Blue</dt><dd><input type="range" min="0" max="255" id="blue" onchange="myfunc();"/></dd></dl>
<div id="ourtext">

//call this JS at bottom of page as body should be loaded before its call.
<script src="myjs.js"></script>
<p style="text-align: justify;">

Now wee need to capture the value of these sliders and use these value to create a color and assign that color to our target. We have used javascript code
for that.

Javascript code:

var myfunc=function(){

var heading;
var red,green,blue;

heading= document.querySelector('.target');
red = document.querySelector('#red');
green = document.querySelector('#green');
blue = document.querySelector('#blue');
document.body.addEventListener("change", function(){'rgb('+[red.value,green.value,blue.value].join(',')+')';
<p style="text-align: justify;">

In above code we have not done any feature detection so browsers like IE 8 who doesn’t support range input type will fallback to normal text input type and your application will be of no use. So its better if you do some feature detection and Alert user that their browser is older to use this feature. Else use a polyfill as fallback which supports all the browser. You can also use jQuery UI to achieve the same and it will be supportable in all the browsers. You can download the code from here. I have added few lines for feature detection in that code.

Share the tutorial to help your other friends and followers :)

About sanjeev

Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

2 Responses so far.

Comments are closed.