arozwalak
11/14/2013 - 2:54 PM

HTML5: Range Inputs

HTML5: Range Inputs

style.css
content_copyfile_download
* { margin: 0; padding: 0;}
dt {float : left; padding-right: 20px; clear: both;}
dd {margin-bottom: 10px;}
scripts.js
content_copyfile_download
;(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);
  }  
})();
index.html
content_copyfile_download
<!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>