Composant · Formulaire

RangeSlider

Stable

Curseur à deux poignées pour sélectionner une plage `[min, max]`. Plage colorée entre les poignées, qui ne se croisent jamais, et clavier complet sur chaque poignée.

Exemples

Tailles

Voir le code (Svelte)

<div class="docs-demo-stack">
  <RangeSlider
    label="Plage (sm)"
    size="sm"
    value={[15,60]}
    defaultValue={[15,60]}
    modelValue={[15,60]}
    min={0}
    max={100}
  />
  <RangeSlider
    label="Plage (md)"
    size="md"
    value={[25,75]}
    defaultValue={[25,75]}
    modelValue={[25,75]}
    min={0}
    max={100}
  />
  <RangeSlider
    label="Plage (lg)"
    size="lg"
    value={[40,90]}
    defaultValue={[40,90]}
    modelValue={[40,90]}
    min={0}
    max={100}
  />
</div>

Pas personnalisé

Voir le code (Svelte)

<RangeSlider
  label="Latence (ms, pas de 50)"
  value={[100,400]}
  defaultValue={[100,400]}
  modelValue={[100,400]}
  min={0}
  max={1000}
  step={50}
/>

État désactivé

Voir le code (Svelte)

<RangeSlider
  label="Plage figée"
  value={[30,70]}
  defaultValue={[30,70]}
  modelValue={[30,70]}
  min={0}
  max={100}
  disabled
/>

API

Prop	Type	Default
`value`	`[number, number]`	optionnel (contrôlé)
`defaultValue`	`[number, number]`	`[min, max]`
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`label`	`string`	optionnel
`helperText`	`string`	optionnel
`errorText`	`string`	optionnel
`invalid`	`boolean`	`false`
`showValue`	`boolean`	`true`
`valueFormatter`	`(value: number) => string`	optionnel
`ariaLabelMin`	`string`	`"Valeur minimale"`
`ariaLabelMax`	`string`	`"Valeur maximale"`
`disabled`	`boolean`	`false`
`onChange` / `v-model`	`(value: [number, number]) => void`	optionnel
`class`	`string`	optionnel

Accessibilité

Flèches = ±step, PagePréc/Suiv = ±10×step, Début/Fin = min/max. Chaque poignée a un `aria-label` distinct (`ariaLabelMin` / `ariaLabelMax`).

Notes d’usage

Contrôlé via `value: [number, number]` (Svelte/React) ou `v-model` (Vue). Sans `value`, le composant gère un état interne à partir de `defaultValue`.

Chaque poignée est un `role="slider"` indépendant avec ses propres `aria-valuemin/now/max` ; la poignée basse ne dépasse jamais la haute (et inversement).

Tokens utilisés

--st-component-field-labelText
--st-component-field-gap
--st-component-field-helpText
--st-component-field-errorText
--st-component-field-maxWidth
--st-component-control-border
--st-component-control-focusRing
--st-component-control-radius
--st-semantic-border-subtle
--st-semantic-text-muted
--st-semantic-text-secondary
--st-semantic-text-primary
--st-semantic-surface-default
--st-semantic-feedback-error
--st-semantic-action-primary
--st-motion-fast
--st-motion-easing