Range Selector in HTML5

At times, you need to select (rather than enter) values falling within a specific range. Recollect the custom video player you developed in Chapter 3: you provided the facility to change the player’s volume. In such
cases it isn’t appropriate to expect the user to enter a volume level. Instead, it’s better to let them select a
volume level from a range. The following markup shows how you can use the range input type:

<input id="range1" type="range" min="1" max="5" step="1" />

Attributes such as min, max, and step have the same significance as for the number input type (min and max control the control’s minimum and maximum allowed values, and step controls the jump in the value).