HTML <input> Tag with 'type=range'
<form name="myForm" action="http://www.htmlcodes.ws/resources/html-forms-action.cfm">
<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="http://www.htmlcodes.ws/resources/html-forms-action.cfm">
<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="http://www.htmlcodes.ws/resources/html-forms-action.cfm">
<input type="range" step="10" name="myField3">
<button>Submit</button>
</form>