The range Type

Supported Browser Screenshots

The Low Down

The range input is number-based in that the value it submits is a number. Although it's supposedly for "imprecise" control, or where the specific number chosen is irrelevant.

• Opera 9 provides a UI slider control with dots and a white box as the slider. Opera 10 provides a UI slider control with a circular blue slider in a pathway, surrounded by a border.
• Safari 4+ / Chrome 6+ provide a UI slider control with a circular blue slider in a pathway without a border.
• No browser displays the actual number currently selected (intentional, spec says range inputs are for data where exact value isn't important).
• Validation/required is irrelevant since a slider will always have a valid value.
• Falls back to a regular text input, which is not very useful as that has no pre-determined choices as ranges do. A polyfill involves a select element and some JavaScript.
• Mobile Safari (iOS 3.1), if no value is provided, will set the default value of the field to be half-way between the min and max values, if present.
• If the height of the input is set to be larger than the width, the range slider can go vertical.

  <input type="range" name="grade" 
  style="width: 20px; height: 200px;
  -webkit-appearance: slider-vertical;">

  WebKit was working with the above code, now is broken (borked when they pulled validation?). They also say ultimately they will autodetect for height > width and do it automatically. Opera would auto-detect in version 9, broke it in version 10, and fixed in version 11. IE 10 auto-detects.
• Want to show to show value as the slider moves?

  <input type="range" required name="range">
  <output onforminput="value=range.value">0</output>

  Or more robustly, like this.