Skip to content

Instantly share code, notes, and snippets.

@Kyle-Falconer
Forked from dudleystorey/auto-generated range ticks
Last active February 17, 2016 18:24
Show Gist options
  • Save Kyle-Falconer/d5d6a42203ecccfc9a3d to your computer and use it in GitHub Desktop.
Save Kyle-Falconer/d5d6a42203ecccfc9a3d to your computer and use it in GitHub Desktop.
Creates an auto-generated series of option values to generate ticks for Chrome & IE10 range sliders. slider requires min,max,step and list attributes.
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);
@Kyle-Falconer
Copy link
Author

Fixed for Chrome, changed string concatenations to array join.

fiddle here: https://jsfiddle.net/netinept/y2yzpcn6/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment