Correctif « input type="range" » (barre coulissante)

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

Questions ou commentaires?

But

Le <input type="range" /> permet d'afficher une barre coulissante. Étant donné que certains navigateurs ne prennent pas en charge cette fonctionnalité à l'origine, ce correctif émule la même fonctionnalité en utilisant HTML générique et WAI-ARIA.

Needs translation

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 de modification :