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>
   <title>Range input type example</title>
   Price Range: 0<input id="skill" type="range" min="1" max="100" value="0">100

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.


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

HTML5 Range Input Type

Leave a Reply

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

Pin It on Pinterest

Share This

Share this post with your friends!