Curseur

Saisie par curseur. Prend en charge min/max/step, le mode double curseur (range), les graduations (marks), l'affichage de la valeur (showInput), trois tailles et la désactivation ; fonctionne à la souris comme sur écran tactile.

Curseur

<template>
  <div class="demo-col" style="max-width: 520px; gap: 26px">
    <div>
      <LhSlider v-model="single" :min="0" :max="100" :step="5" show-input />
      <p class="demo-note">min=0 max=100 step=5 showInput : {{ single }}</p>
    </div>
    <div>
      <LhSlider v-model="ranged" range :min="10" :max="90" :step="10" />
      <p class="demo-note">range, double curseur : {{ JSON.stringify(ranged) }}</p>
    </div>
    <div>
      <LhSlider v-model="marked" :min="0" :max="100" :marks="marks" />
      <p class="demo-note">marks, graduations : {{ marked }}</p>
    </div>
    <div>
      <LhSlider v-model="single" size="small" />
      <LhSlider v-model="single" disabled />
      <p class="demo-note">size="small" et disabled</p>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: 35,
    ranged: [20, 60],
    marked: 40,
    marks: { 0: 'Début du trait', 50: 'Déroulé du trait', 100: 'Fin du trait' },
  }),
}
</script>

Props

Propriété	Description	Type	Valeur par défaut
v-model	Valeur liée ; en mode range, [début, fin] (model : modelValue/input)	number \| [number, number] \| null	—
min	Valeur minimale	number	0
max	Valeur maximale	number	100
step	Pas	number	1
range	Mode double curseur	boolean	false
marks	Graduations { value: label }	Record<number, string>	—
showInput	Affiche le texte de la valeur	boolean	false
size	Taille (hauteur de la piste)	'small' \| 'medium' \| 'large'	'medium'
disabled	Désactivé	boolean	false
sx	Raccourci de mise en page sx	—	—

Events

Événement	Description	Paramètres de rappel
input	Événement v-model	(val)
change	Déclenché lorsque la valeur change	(val)

Accessibilité

La poignée du curseur porte role="slider" + aria-valuemin/max/now ; placé dans un LhFormItem, le composant reçoit aria-invalid en cas d'échec de validation.