Auto-Generate Marks on HTML5 Range Sliders with JavaScript

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

<fieldset>

<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>

<option>0</option>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

<option>6</option>

<option>7</option>

<option>8</option>

<option>9</option>

<option>10</option>

</datalist>

</fieldset>

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

Lex Luthor’s Earthquake Machine Richter Scale 0 1 2 3 4 5 6 7 8 9 10

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'));

 datalist.id = 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 = Array.prototype.slice.call(lists);

arr.forEach(ticks);

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>

Produces:

Volume

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. A few possibilities:

• It would be useful to include a data-grads attribute that would contain a different increment from step, and use that as the alternate spacing for the graduations.

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. Check out the code for the auto-generated ticks on CodePen