Commande de barre coulissante (correctif pour l'élément input type='range') - nschonni/wet-boew GitHub Wiki

english

Table of Contents

Contexte

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

Objectif

Le <input type="range" /> permet d'afficher une commande de barre coulissante. Étant donné que certains navigateurs ne prennent pas en charge cette fonctionnalité à l'origine, ce polyfill é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 polyfill assure que le <input type="range" /> est visuellement convertie commande de barre coulissante et exposés aux technologies d'assistance en ajoutant ARIA.

Mise en œuvre

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

Paramètres/Options

Le polyfill commande de barre coulissante accepte les paramètres suivants: min, max, étape, valeur et data-fd-slider-vertical.

min

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

max

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

step

Spécifie le nombre pour l'intervalle. La valeur par défaut est 1.

value

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

data-fd-slider-vertical

Définissez 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 html et le correctif pour l'élément input. Le code pour la barre coulissante se trouve à plusieurs endroits dans le répertoire source de la BOEW :

  • js/polyfills/slider.js - contient le code JavaScript pour le correctif de la commande de barre coulissante.
  • js/sass/slider.scss - contient le CSS pour le correctif de la commande de barre coulissante.
  • js/images/slider/ - contient les images pour le correctif de la commande de barre coulissante.

Problèmes connus

Il n’existe actuellement aucun problème connu.

Historique des versions

Références

⚠️ **GitHub.com Fallback** ⚠️