Most web developers don’t realise that HTML5 range sliders can display graduation marks along their length by using an associated <datalist>:

	<legend>Lex Luthor’s Earthquake Machine</legend>
	<label for="richter">Richter Scale</label>
	<input type="range" min="0" max="10" value="0" id="richter" step="1" list="richterscale">
	<datalist id="richterscale">

Which produces the tick marks in supporting browsers (Chrome and IE10+, at this point):

Lex Luthor’s Earthquake Machine

While neat, the <datalist> code is often redundant: the graduation marks on the slider most often match the incremented step value. This makes typing out the <datalist> options something of a chore, and makes the perfect opportunity to use JavaScript for progressive enhancement of the slider.

Using A Script to Generate Slider Marks

The script is placed at the end of the page that contains the slider:

function ticks(element) {
	if (element.hasOwnProperty('list') && element.hasOwnProperty('min') && element.hasOwnProperty('max') &&    element.hasOwnProperty('step')) {
	var datalist = document.createElement('datalist'),
	minimum = parseInt(element.getAttribute('min')),
	step = parseInt(element.getAttribute('step')),
	maximum = parseInt(element.getAttribute('max')); = element.getAttribute('list');
	for (var i = minimum; i < maximum+step; i = i + step) {
		datalist.innerHTML +="<option value="+i+"></option>";
element.parentNode.insertBefore(datalist, element.nextSibling);
var lists = document.querySelectorAll("input[type=range][list]"),
arr =;

Very simply, the script looks for all the range elements on the page, checks to see if they have a list, step, min and max attribute, and uses the value of each to generate a matching datalist with option values incremented to step, producing a series of check marks.

So given just the following:

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


In supporting browsers, you can see that the result also scales to the width of the slider.

Future improvements

There’s plenty of scope for improvement in this script:

  • It would be useful to include a data-grads attribute that would contain a different increment from step, and use that as alternate spacing for the graduations.
  • This attribute could also carry a keyword, such as log, to produce logarithmic spacing, or other mathematical progressions.
  • Finally, the script could act as a polyfill to produce the graduation marks for Firefox and Safari, with a greater range of options, such as highlighting every tenth mark on the scale.

I’ll work on making those changes to future versions of the script: keep an eye on the associated Gist, or follow me on Twitter to be alerted on future advancements.

Enjoy this piece? I invite you to follow me at to learn more.