---

Search posts under HTML5:

---

Number between range in HTML5

How to provide option to select a value between range in HTML5?

To provide option to select a value between range, we can set type attribute to "range". In order to specify the minimum and maximum value, we can set min and max attribute.

<input type="range" id="myRange" name="myRange" min="0" max="50" value="24" /> 

Above code snippet, allows user to slide and select value between 0 to 50. To set default value of this element, we can set value attribute.

Output

Specifying Step

To specify the step that will be used to increment or decrement the slider value, we can set step attribute.

<input type="range" name="myRange1" min="0" max="50" step="2" value="25" />

This will increment or decrement the slider value by 2. like 0, 2, 4, 6 etc. The default step value is 1 ie. slider increment or decrement the values by 1. eg. 1,2,3 etc.

Specifying decimal values

We can also specify decimal values to this range element.

<input type="range" name="myRange2" min="0.0" max="3.0" step="0.1" />