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:
- max - spécifie la valeur maximale autorisée
- min - spécifie la valeur minimale autorisée
- step - spécifie la valeur d'intervalles (augmentations)
- value - spécifie la valeur par défaut
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 :