Barre coulissante

Aperçu

Chef de project : Serge Bédard (@sbed)

Objet

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.

Raison d'être

Les navigateurs qui ne prennent pas en charge l'élément <input type="range" /> ignore le type="range". Par conséquent, une zone de texte normal est affiché et son contenu n'est pas exposé à des technologies d'assistance. Ce correctif assure que le <input type="range" /> est visuellement convertie barre coulissante et exposés aux technologies d'assistance en ajoutant WAI-ARIA.

Mise en œuvre

Pour utiliser le correctif, un élément input standard avec l'attribut input type="range" doit être utilisé. Dans le cas où le navigateur ne supporte pas le input type="range", le correctif est automatiquement chargé.

Paramètres

Le correctif barre coulissante accepte les paramètres suivants : min, max, step, value et data-fd-slider-vertical.

Paramètre max

Spécifie la valeur maximale autorisée. La valeur par défaut est 0.

Paramètre step

Spécifie la longueur de l'intervalle. La valeur par défaut est 1.

Paramètre value

Spécifie la valeur par défaut de départ (obligatoire).

Paramètre data-fd-slider-vertical

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

<input type="range" data-fd-slider-vertical="v-s" min="0" max="100" step="1" value="1" />

Exemples

Développement

La barre coulissante est dépendent sur le soutien natif pour l'élément input type="range" de HTML5 et le correctif pour l'élément input.

Problèmes connus

Il n’existe actuellement aucun problème connu.

Historique des versions

Références