HTML5 Range Input Type

HTML5 has new input types for forms such as color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week. In this article we shall discuss the range input type. This field would look like a slider control to move the range of values. This tutorial highlights the benefits of this input type with an example.

The range type is used in <input> tag to specify a range of values. We can even restrict the values in this type by using the following attributes:

  • max: specifies the maximum range of the value .
  • min: specifies the minimum range of the value .
  • value: It represent a number which it can be a floating point number or integer number.
  • step: It is a scale factor of element value.

Syntax of range Input Type

&lt;input type= &quot;range&quot;&gt;

HTML5 Range Input Type Example

<!DOCTYPE html>
<head>
   <title>Range input type example</title>
</head>
<body>
   Price Range: 0<input id="skill" type="range" min="1" max="100" value="0">100
</body>
</html>

Here we are setting a range for the price using the range attribute. The min and max values are set as 1 and 100 respectively.

Example Application Test

  • Save the file as range_example.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

Output

When the execution process is completed successfully we will get the following output :

HTML5 Range Input Type

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*