The Low Down
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
listattribute 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
- If no
listattribute is present, IE will include ticks based on the
stepattribute with a maximum of 6 ticks, remembering the default value for
stepis 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
- 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.
- If no
valueis provided, the default value of the field to be half-way between the
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.