Slider simple et range

Objectif

Le même composant Slider gère maintenant une valeur unique ou un intervalle. Le mode range évite de maintenir deux composants visuellement et fonctionnellement différents.

Valeur simple

<Slider
  defaultValue={40}
  min={0}
  max={100}
  onValueChange={(value) => console.log(value)}
/>

Intervalle

<Slider
  range
  defaultValue={[20, 80]}
  min={0}
  max={100}
  step={5}
  minDistance={10}
  startLabel="Prix minimum"
  endLabel="Prix maximum"
/>

• range active les deux poignées;
• value et defaultValue acceptent alors [start, end];
• minDistance empêche les poignées de se croiser ou de trop se rapprocher;
• formatValue est appliqué aux deux valeurs;
• name nomme la borne basse et endName la borne haute;
• sans endName, le nom de la borne haute devient automatiquement ${name}End;
• les deux entrées restent utilisables au clavier et disposent de libellés accessibles indépendants.

Field accepte également le tuple numérique pour type="slider". Le mode est activé avec controlProps={{ range: true }} afin de toujours réutiliser le composant Slider officiel.