The Current State of HTML5 Forms

The min, max, and step Attributes

<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="15" step="5">

Live Demo




Firefox
16+
Safari
5+
Safari Mobile
3.2+
Chrome
6+
Opera
10.6+
IE
10+
Android
4.0+
Supported Supported Supported Supported Supported Supported Supported

Supported Browser Screenshots

Chrome 10

Unsupported Browser Screenshots

Firefox 3.6

The Low Down

To use the min, max, and step attributes the input first needs a type of number, range or one of the date/time values. In the case of type="number", small arrow widgets are applied after the input which increment the current value of the input up or down. In the case of type="range", the possible values of the slider GUI presented in supporting browsers will range from the min to the max value, incrementing by the value of the step attribute.

  • You don't need to use all three. Each works independently with default values being set for step if the attribute is not explicitly included.
  • If step is not explicitly included, the value of step defaults to 1, as if it were included with step="1" (or step="60" in the case of type="time"), even if the default value or min value is a float.
  • To allow any float value, include the value of any on the step attribute, with step="any".
  • min and max imply validation of that value.
  • When max and step are set, Chrome may display a narrower input box for number input type, as the length of the largest valid value is limited.
  • The Up/Down GUI spinner widget takes space from total width of input (Chrome 10 tested).
  • If no value is set, the default value of range is half way between the min and max values. Number will generally default to 0 when the GUI is first interacted with if no value is set.
  • While IE10 and IE11, Android and iOS don't support the GUI of the Number input type, they do support min, max, and step in terms of validation constraints.