- Passer au contenu principal
- Passer à « À propos de ce site »

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

- Documentation
- 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.

## 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 :
  2014-07-20