Pages tagged html5 range input

How to use the HTML5 range input type

Before the introduction of HTML5, thinking about having a range slider on a webpage was equivalent of a crime. You needed a bunch of custom javascript code and still it didn't work well on all devices.

However, HTML5 brought with it numerous new attributes and features that added the flavor that HTML missed for ages. Not many would have expected something like the range element to make its entrance with HTML5, but once it did, hardly any have raised any concerns with its working. Creating anything close to the sliding range element takes tons of lines of coding in JavaScript, but the same can be achieved with just a single element in HTML5. How often do you hear that something could be done better in HTML than JavaScript?

As the name suggests, the most common use of the slider input is when we know the lowest and the highest inputs that can be given as a response. For instance, if we are developing a website that only permits users in the age group 18-40. We can have the birth year as a sliding input range with the lowest value being 1986 and the highest being 1998. The slider input is a highly intuitive user interface that projects itself as an alternative to a plain textbox input or a drop-down with fixed values.