Introduction
In many situations, it is required to present the user to choose from a range of valid values. For example, the user has to choose a rating from 1 to 5, or a percentage, or a value from a possible range of valid inputs. To make things easy for users, HTML5 specification supports range as a first class type on the input element.
Historically, to mimic a range/slider on a web pages, web developers had to use javascript or custom plugin. However, with HTML5, there is now direct support for range like input.
The HTML5 spec says
The HTML5 spec describes range as a type attribute on the input element whose value is “range” and represents an imprecise control for settling the element’s value to a string representing a number.
Source: http://dev.w3.org/html5/markup/input.range.html
The following attributes are permitted on an input element which has the “range” type.
All global attributes:
An input element with “range” type can be a child of any phrasing element.
Hands On
Range types can be declared as simple as under:
<input id=”myRange” type=”range”>
A simple HTML5 web page which illustrates range type is listed below
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Range demo</h1>
<p>Demo showing range type on input element</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
Range
<input id=”example1” type=”range” min=”1” max=”100” step=”1” onchange=”textbox1.value = example1.value” />
<input id=”textbox1” type=”text” />
<br>
Range example 2
<input id=”example2” type=”range” min=”0” max=”50” step=”10” onchange=”textbox2.value = example2.value” />
<input id=”textbox2” type=”text” />
</body>
</html>
When the page is rendered in a modern browser which supports HTML5, you can see the range input type in action.
For the first slider, you can step 1 and see the corresponding value of the slider printed on the adjoining textbox.
For the second slider, you can only step in 10s.
The page is rendered as below on Internet Explorer 11.
On Google Chrome, it is rendered as below.
Input elements with range type only support numbers to be part of the range.
Summary
In this article, we learned how to use the range type on input elements in web pages to mimic the slider experience. I hope you have found this information useful.
About the author
Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
