The range Type

Live Demo

	Firefox 23+	Safari 4+	Safari 5+	Chrome 6+	Opera 11+	IE 10+	Android 4.2+
Single Slider
Multiple

The Low Down

The range input provides for a slider UI that submits is a number: it’s for “imprecise” control, or where the specific number chosen is more relative rather than needing to be exact.

• Opera, Safari, Firefox and Chrome provide for a grey slider track with a circular thumb, which is blue in Safari and grey everywhere else. IE, on the other hand, provides for a rectangular blue and grey range track with a black square thumb.
• By default, other than in IE, there are no ticks along the slider path. To create ticks along the slider, create a <datalist> with all the values and add the list attribute to point to that datalist. In the case of an associated datalist, all browsers that support tick marks will present a tick mark for each valid <option> values in the associated <datalist>.
• If no list attribute is present, IE will include ticks based on the step attribute with a maximum of 6 ticks, remembering the default value for step is 1, starting with the first tick at the minimum value, and the last tick being the maximum value if both are valid. No ticks will be displayed if step="any".
• IE is the only browser displaying the actual number currently selected: as the user slides the thumb along the track, the current value is displayed as a tool tip. Other browsers don’t indicate the current value, which is OK as the 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 – the UI slider does not allow for selecting invalid values.
• 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.
• If no value is provided, the default value of the field to be half-way between the min and maxvalues, if present.
• It is possible to create a vertical slider. The default method will eventually be to simply declare a width that is narrower than the height. Until vertical ranges are detected automatically, specific styles will convince browsers. For now, include orient="vertical" attribute/value for Firefox (see bug report), -webkit-appearance: slider-vertical; in the style declaration for Safari, Chrome and Opera, and writing-mode: bt-lr; in your styles for Internet Explorer.
  
• The multiple attribute, when supported on type=”range”, will allow for two sliders.