Formulaires

Curseur

nouveauClasses hb-range hb-range-valueVuetify 2 v-slider, v-range-sliderVuetify 3 v-slider, v-range-slider

Quand l'utiliser

Pour une valeur approximative sur une plage connue, réglée à l'œil : seuil d'alerte, pourcentage de remise, luminosité. Pour une valeur exacte, un champ numérique. Pour une plage (de… à…), v-range-slider : le bundle n'a pas de double poignée.

Seuil d'alerte de stock

35 %

Désactivé

60 %

Code

<div class="hb-stack" style="max-width:420px">
  <div class="hb-group"><label class="hb-label" for="r1">Seuil d'alerte de stock</label><div class="hb-range"><input id="r1" type="range" min="0" max="100" value="35"><span class="hb-range-value">35 %</span></div></div>
  <div class="hb-group"><label class="hb-label" for="r2">Désactivé</label><div class="hb-range"><input id="r2" type="range" min="0" max="100" value="60" disabled><span class="hb-range-value">60 %</span></div></div>
</div>

Accessibilité

C'est un <input type="range"> natif : flèches au clavier, min, max, step, aria-valuetext si l'unité n'est pas évidente. La valeur s'affiche toujours en texte (hb-range-value), mise à jour par l'application à chaque input.