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.

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.

Attributs pertinents

Utilisez les attributs suivants pour spécifier les restrictions:

Exemples

Étendue : 0 à 100 avec les augmentations de 1

Visualiser le code
<input name="html5shim-1" id="html5shim-1" type="range" min="0" max="100" step="1" title="Étendue : 0 à 100 avec les augmentations de 10" value="50" />

Étendue : 20 à 50 avec les augmentations de 10

Visualiser le code
<input name="html5shim-2" id="html5shim-2" type="range" min="20" max="50" step="10" title="Étendue : 20 à 50 avec les augmentations de 10" value="20" />

Étendue : Créée programmaticalement

Visualiser le code

HTML

<p id="slider-prg"></p>

JavaScript

$slider = $( "<input name='html5shim-3' id='html5shim-3' type='range' value='50'/>" );
$slider.appendTo( "#slider-prg" ).trigger( "wb-init.wb-slider" );
setTimeout( function() {
	$slider.get( 0 ).value = 85;
	$slider.trigger( "wb-update.wb-slider" );
}, 2000);
Date de modification :