Barre coulissante

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

Example horizontal

Étendue : 0 à 100 avec les augmentations de 1

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" onchange="document.getElementById('html5shim-1-out').innerHTML = '(Valeur actuelle : ' + this.value + ')'" />

Étendue : 20 à 50 avec les augmentations de 10

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" onchange="document.getElementById('html5shim-2-out').innerHTML = '(Valeur actuelle : ' + this.value + ')'" />

Example vertical

Définissez l'attribut data-fd-slider-vertical="v-s" pour placer la barre coulissante en position verticale.

Étendue : 0 à 100 avec les augmentations de 1

Code

<input data-fd-slider-vertical="v-s" name="html5shim-V1" id="html5shim-V1"  type="range" min="0" max="100" step="1" title="Étendue : 0 à 100 avec les augmentations de 1" value="50" onchange="document.getElementById('html5shim-V1-out').innerHTML = '(Valeur actuelle : ' + this.value + ')'" />

Étendue : 20 à 50 avec les augmentations de 10

Code

<input data-fd-slider-vertical="v-s" name="html5shim-V2" id="html5shim-V2"  type="range" min="20" max="50" step="10" title="Étendue : 20 à 50 avec les augmentations de 10" value="20" onchange="document.getElementById('html5shim-V2-out').innerHTML = '(Valeur actuelle : ' + this.value + ')'" />