Slider control

Overview

Project lead: Serge Bédard (@sbed)

Purpose

The <input type="range" /> allows to display a slider control bar. Because some browsers do not support this functionality natively, this polyfill emulates the same functionality using generic HTML and WAI-ARIA.

Rationale

Browsers that do not support the <input type="range" /> natively ignore the type="range" therefore, a normal text box is displayed and its content is not exposed to assistive technologies. This polyfill ensures that the <input type="range" /> is visually conveyed through a slider control and exposed to assistive technologies by adding WAI-ARIA.

Implementation

To use the polyfill, a standard input element with the attribute type set to range must be used <input type="range" />. In cases where a browser doesn't support the type range, the polyfill is automatically loaded.

Parameters

The slider control polyfill accepts the following parameters: min, max, step, value and data-fd-slider-vertical.

Max parameter

Specifies the maximum value allowed. Default value is 0.

Step parameter

Specifies the interval size. Default value is 1.

Value parameter

Specifies the default starting value (required).

data-fd-slider-vertical parameter

Use data-fd-slider-vertical="v-s" to set the slider in vertical position.

<input type="range" data-fd-slider-vertical="v-s" min="0" max="100" step="1" value="1" />

Examples

Development

The slider control is dependent upon native support for the HTML5 <input type-"range" /> or the slider polyfill.

Known issues

There are no known issues at this point in time.

Version history

References