Kyle-Falconer
2/17/2016 - 6:17 PM

Creates an auto-generated series of option values to generate ticks for Chrome & IE10 range sliders. slider requires min,max,step and list a

Creates an auto-generated series of option values to generate ticks for Chrome & IE10 range sliders. slider requires min,max,step and list attributes.

auto-generated range ticks
content_copyfile_download
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);