Formulaires

Plage

La classe .form-range remplace le curseur natif input type="range" par un curseur aux couleurs de Cauri. Elle convient à une valeur approximative dans une échelle bornée, comme la durée d’un prêt.

Curseur de base#

Appliquez .form-range à un input type="range". Par défaut, la plage va de 0 à 100 par pas de 1.

Pourcentage d'épargne automatique

<label for="plage-base" class="form-label">Pourcentage d'épargne automatique</label>
<input type="range" class="form-range" id="plage-base">

Bornes et pas#

min, max et step fixent l’échelle. Choisissez un pas qui correspond à ce que la banque propose réellement, par exemple des tranches de 500 000 FCFA.

Montant du prêt : de 500 000 à 10 000 000 FCFA

Par pas de 500 000 FCFA.

Durée du prêt : de 6 à 60 mois

<label for="plage-montant" class="form-label">Montant du prêt : de 500 000 à 10 000 000 FCFA</label>
<input type="range" class="form-range" id="plage-montant" min="500000" max="10000000" step="500000" value="3000000" aria-describedby="plage-montant-aide">
<div id="plage-montant-aide" class="form-text">Par pas de 500 000 FCFA.</div>

<label for="plage-duree" class="form-label mt-3">Durée du prêt : de 6 à 60 mois</label>
<input type="range" class="form-range" id="plage-duree" min="6" max="60" step="6" value="24">

Désactivé#

Plafond de retrait (fixé par l'agence)

<label for="plage-desactivee" class="form-label">Plafond de retrait (fixé par l'agence)</label>
<input type="range" class="form-range" id="plage-desactivee" min="0" max="500000" step="50000" value="250000" disabled>

Afficher la valeur choisie#

Un curseur ne montre pas sa valeur : affichez-la dans un élément <output> mis à jour par un petit script, et reliez-le au champ avec aria-describedby.

<label for="plage-pret" class="form-label">Montant du prêt</label>
<input type="range" class="form-range" id="plage-pret" min="500000" max="10000000"
       step="500000" value="3000000" aria-describedby="plage-pret-valeur">
<output id="plage-pret-valeur" for="plage-pret" class="fw-semibold">3 000 000 FCFA</output>

<script>
  const curseur = document.getElementById('plage-pret');
  const sortie = document.getElementById('plage-pret-valeur');
  curseur.addEventListener('input', () => {
    sortie.textContent = Number(curseur.value).toLocaleString('fr-FR') + ' FCFA';
  });
</script>

Attributs et classe

Attributs et classe
Élément	Valeur par défaut	Rôle
`.form-range`	—	Style du curseur : piste, poignée et focus aux couleurs de Cauri.
`min`	`0`	Valeur la plus basse.
`max`	`100`	Valeur la plus haute.
`step`	`1`	Écart entre deux valeurs possibles.
`value`	milieu de la plage	Valeur initiale.
`disabled`	—	Désactive le curseur ; la poignée est grisée.

Bonnes pratiques

À faire

Affichez toujours la valeur choisie en texte à côté du curseur, avec son unité (FCFA, mois).
Indiquez les bornes dans le libellé ou dans le texte d’aide.
Choisissez un step cohérent avec l’offre pour éviter des valeurs impossibles.
Proposez aussi un champ de saisie quand la valeur exacte compte (montant d’un virement).

À éviter

N’utilisez pas un curseur pour une valeur précise ou saisie au clavier, comme un montant de virement.
N’imposez pas la souris : le curseur doit rester utilisable avec les flèches du clavier.
Ne comptez pas sur la position de la poignée pour transmettre la valeur.

Accessibilité

Un <label for> visible est indispensable, ainsi que l’affichage de la valeur courante dans un <output>.
Les flèches du clavier modifient la valeur d’un pas, Début et Fin vont aux bornes : ne les interceptez pas.
Si la valeur n’est pas parlante (indice 3 sur 5), ajoutez aria-valuetext avec un texte lisible.
Prévoyez une zone de contact d’au moins 44 px de haut sur mobile : n’écrasez pas la hauteur du curseur.