The min, max, and step attributes 

Live Demo

The Low Down

Firefox 16+

Safari 5+

Safari Mobile 3.2+

Chrome 6+

Opera 10.6+

IE 10+

Android 4.0+

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.