Skip to content

Instantly share code, notes, and snippets.

@arozwalak

arozwalak/index.html

Last active December 28, 2015 07:59
Show Gist options
  • Save arozwalak/7468176 to your computer and use it in GitHub Desktop.
Save arozwalak/7468176 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5: Range Inputs
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<dl>
<dt>Red</dt>
<dd><input id="r" type="range" min="0" max="255"></dd>
</dl>
<dl>
<dt>Green</dt>
<dd><input id="g" type="range" min="0" max="255"></dd>
</dl>
<dl>
<dt>Blue</dt>
<dd><input id="b" type="range" min="0" max="255"></dd>
</dl>
<h1>Tuts+ Rocks</h1>
</body>
</html>
Raw
scripts.js
;(function(){
var heading,
r, g, b;
function supportsRange() {
var i = document.createElement('input');
i.setAttribute('type', 'range');
return i.type === 'range';
}
if(supportsRange()) {
heading = document.querySelector('h1');
r = document.querySelector('#r');
g = document.querySelector('#g');
b = document.querySelector('#b');
document.body.addEventListener('change', function(){
heading.style.color = 'rgb(' + [r.value, g.value, b.value].join(',') + ')';
}, false);
}
})();
Raw
style.css
* { margin: 0; padding: 0;}
dt {float : left; padding-right: 20px; clear: both;}
dd {margin-bottom: 10px;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment