Sommaire

Les réglettes avec curseur

1. Une réglette simple

L’HTML5 propose d’utiliser des réglettes avec des curseurs coulissants pour que le visiteur puisse déterminer une valeur. Ce composant est très pratique pour élaborer des interfaces interactives.

Attention ce composant utilise du JavaScript, veillez à ce que les liaisons vers tous les fichiers soient bien implémentées. Reportez-vous au chapitre Installer Foundation, à la section Foundation complet - Les liaisons.

Voici le code HTML pour insérer une réglette simple avec un curseur :

<div class="slider" data-slider data-initial-start="50" data-end="200"> 
  <span class="slider-handle"  data-slider-handle role="slider"  
tabindex="1"></span> 
  <span class="slider-fill" data-slider-fill></span> 
</div>

Le fichier de cet exemple à télécharger est Chapitre 08 / 08-bouton-h1.html.

Voici son affichage :

images/C08-012.png

La boîte <div> de la réglette utilise la classe .slider et l’affichage sur toute la largeur de son conteneur parent. L’attribut data-initial-start="50" indique sur la longueur de la réglette, la valeur initiale à la position de départ du curseur. L’attribut data-end="200" indique la valeur maximale.

Le premier <span> correspond au curseur, le deuxième est la réglette.

L’utilisateur ...