auto-generated range ticks

fiddle for gist: https://gist.github.com/netinept/d5d6a42203ecccfc9a3d

by Kyle Falconer

HTML

<label for="volume">Volume</label>
<input type="range" min="0" max="5" value="0" id="volume" step="1" list="volumeslider">

JavaScript

function ticks(element) {
  if ('list' in element && 'min' in element && 'max' in element && 'step' in element) {
    var datalist = document.createElement('datalist'),
      minimum = parseInt(element.getAttribute('min')),
      step = parseInt(element.getAttribute('step')),
      maximum = parseInt(element.getAttribute('max'));
    datalist.id = element.getAttribute('list');
    var options = [];
    for (var i = minimum; i < maximum + step; i = i + step) {
      options.push("<option value=" + i + "></option>");
    }
    datalist.innerHTML += options.join('');
    element.parentNode.insertBefore(datalist, element.nextSibling);
  }
}
var lists = document.querySelectorAll("input[type=range][list]"),
  arr = Array.prototype.slice.call(lists);
arr.forEach(ticks);