Range Input field in HTML5 Forms

Range Input field in HTML5 Forms, in this article you will learn about range input field in depth. The range input type indicates to the browser that the field is expecting a numeric value selected from within a given range. This input type can also be used with the min, max, and step attributes to provide additional UI features to help the user select a number.

Simple usage of range input field
[html] <input name="Text2" type="range" value="5"/>

Range input field with minimum and maximum values. If you want to restrict use with minimum and maximum values then you can use min, max attributes for range input field.
[html] <input name="Text3" type="range" min="0" max="120" value="5"/>

Range input field with step. If you want to increase value by a step, then you can use step attribute.
[html] <input name="Text4" type="range" value="5" step="5"/>

Range input field with minimum, maximum and step. Here you can combine both minimum, maximum and step attributes.
[html] <input name="Text5" type="range" min="2" max="12" step="2" value="6"/>

Range input field with minimum, maximum and step in fractions. We can use this range input field for floating points.
[html] <input name="Text5" type="range" min="0.0" max="2.0" step="0.2" value="0.8"/>

These are different types of attributes for range input field, and if you want to know more about other input types read this -> HTML5 Form new input field types. If you want to learn about form validations in HTML5 read this -> HTML5 form validation.

Vivek Vengala

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.