Displaying an HTML slider’s value

HTML5 sliders, or <input type=”range”> are a cool new input type, but he problem is, the user has no indication of which value they have selected. Luckily, this is easy to fix

Firstly you can create your slider and give it a class name, and a unique id. For example:


Then we will see where its value will go. You can create a span whose id is the same as the slider + ‘_value’ for example. This will help us be able to access the elements with javascript later:



Now all we have to do is loop through our sliders, and update the innerHTML of the value span as they change:


Now your sliders should have values next to them (or wherever you place your _value element) that auto-update as you change them =)

Example!



That's all for now! See you next time =)

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.