The Current State of HTML5 Forms

The range Type

<input type=range>

Live Demo



Firefox
11-
Safari
4+
Safari Mobile
5+
Chrome
6+
Opera
11+
IE
10+
Android
2.3
No support Supported Supported Supported Supported Supported No support

Supported Browser Screenshots

Opera 9
Opera 10
Opera 11
Safari 5
IE 10

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.