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.