HTML <input> Tag with 'type=range'

<form name="myForm" action="https://www.PuStudy.Com/resources/html-forms-action.html">
	
<input type="range" name="myField" value="25">

<button>Submit</button>
</form>

The above example demonstrates usage of the <input> element with the type attribute set to range (i.e. type="range").

The range value represents a control for setting the element's value to a string representing a number, but with the caveat that the exact value is not important, letting browsers/user agents provide a simpler interface than they do for the Number state.

Browsers typically display a slider control to enable the user to change the value within the range.

This is a numerical value, with the extra semantic that the exact value is not important. However, the value must be a valid floating-point number.

Specifying a min and/or max Value

By default, the minimum value is 0 and the maximum value is 100. You can change these values by using the min and max attributes. If specified, they must have a value that is a valid floating-point number.

The following example specifies a min value of 1000 and a max value of 10,000. The user can only select a value that falls within that range.

<form name="myForm2" action="https://www.PuStudy.Com/resources/html-forms-action.html">
	
<input type="range" name="myField2" value="2500" min="1000" max="10000">

<button>Submit</button>
</form>

Specifying a step

You can also use the step attribute to limit the numbers the user can choose from.

The following example uses a step value of 10. When the user moves the range slider, the value will increase or decrease in steps of 10.

<form name="myForm3" action="https://www.PuStudy.Com/resources/html-forms-action.html">
	
<input type="range" step="10" name="myField3">

<button>Submit</button>
</form>