Slider control (input type=‘range’ polyfill) - nschonni/wet-boew GitHub Wiki
Project Lead: Serge Bédard(@sbed)
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.
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 ARIA.
To use the polyfill, a standard input element with the attribute type set to range must be used <input type="range" />. In cases where browser don't support the type range, the polyfill is automatically loaded.
The slider control polyfill accepts the following parameters: min, max, step, value and data-fd-slider-vertical.
Specifies the minimum value allowed. Default value is 0.
Specifies the maximum value allowed. Default value is 100.
Specifies the legal number intervals. Default value is 1.
Specifies the default starting value (required)
Set attribute 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"/>
The slider control is dependent upon native support for the HTML5 input type-"range" or the slider polyfill.
The code for the slider control is located in several places within the source folder of WET:
- js/polyfills/slider.js - contains the JavaScript code for the slider control polyfill
- js/sass/includes/_slider.scss - contains the CSS for the slider control polyfill
- js/images/slider/ - contains the images for the slider control polyfill
There are no known issues at this point in time.