Input type="range" polyfill (slider control)

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Questions or comments?

Purpose

The <input type="range" /> element enables the display of 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.

Working example

How to implement

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

Configuration options

Configuration options available for the input type="range" element (HTML5 specification)

Events

Event Trigger What it does
wb-init.wb-slider Triggered manually (e.g., $( "input[type='range']" ).trigger( "wb-init.wb-slider" );). Used to manually initialize the input type="range" polyfill. Note: The progress polyfill will be initialized automatically unless the input type="range" element is added after the page has already loaded.
wb-update.wb-slider Triggered manually (e.g., $( "input[type='range']" ).trigger( "wb-update.wb-slider" );). Used to manually update the input type="range" polyfill.
wb-ready.wb-slider (v4.0.5+) Triggered automatically after the progress polyfill initializes. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native input type="range" support. Used to identify where the input type="range" polyfill initialized (target of the event) 
$( document ).on( "wb-ready.wb-slider", "input[type='range']", function( event ) {
});
$( "input[type='range']" ).on( "wb-ready.wb-slider", function( event ) {
});
wb-updated.wb-slider (v4.0.5+) Triggered automatically after the input type="range" polyfill is updated. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native input type="range" support. Used to identify where the input type="range" polyfill initialized (target of the event) 
$( document ).on( "wb-updated.wb-slider", "input[type='range']", function( event ) {
});
$( "input[type='range']" ).on( "wb-updated.wb-slider", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Input type="range" polyfill source code on GitHub

Date modified: