Composant · Formulaire

Slider

Stable

Curseur horizontal continu basé sur `<input type="range">` avec libellé optionnel, valeur affichée et formatage personnalisable.

Exemples

Tailles

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Slider
    label="Budget (sm)"
    size="sm"
    value={15}
    defaultValue={15}
    modelValue={15}
    min={0}
    max={100}
  />
  <Slider
    label="Budget (md)"
    size="md"
    value={50}
    defaultValue={50}
    modelValue={50}
    min={0}
    max={100}
  />
  <Slider
    label="Budget (lg)"
    size="lg"
    value={82}
    defaultValue={82}
    modelValue={82}
    min={0}
    max={100}
  />
</div>

Validation

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Slider
    label="Qualité"
    value={35}
    defaultValue={35}
    modelValue={35}
    min={0}
    max={100}
    step={5}
  />
  <Slider
    label="Compact (sans libellé de valeur)"
    value={2}
    defaultValue={2}
    modelValue={2}
    min={1}
    max={10}
    step={1}
    showValue={false}
  />
</div>

Valeur reçue via `onchange` : 35

État désactivé

Voir le code (Svelte)

<Slider
  label="Cible figée"
  value={50}
  defaultValue={50}
  modelValue={50}
  min={0}
  max={100}
  disabled
/>

Plage personnalisée

Voir le code (Svelte)

<Slider
  label="Niveau qualité"
  value={7}
  defaultValue={7}
  modelValue={7}
  min={0}
  max={10}
  step={1}
/>

API

Prop	Type	Default
`value`	`number` (`$bindable`)	`0`
`label`	`string`	optionnel
`helperText`	`string`	optionnel
`errorText`	`string`	optionnel
`invalid`	`boolean`	`false`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`showValue`	`boolean`	`true`
`valueFormatter`	`(value: number) => string`	optionnel
`onchange`	`(value: number) => void`	optionnel
`disabled`	`boolean`	`false`
`class`	`string`	optionnel

Notes d’usage

`safeValue` est calculé entre `min` et `max` ; la valeur affichée et l’UI ne sortent pas de ce périmètre.

Quand `showValue` est faux, seul le slider est visible ; vous pouvez piloter un affichage externe via le binding ou `onchange`.

Le tooltip flottant s’affiche au survol/focus du slider.

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
--st-slider-fill