Slider

Slider prend en charge les valeurs uniques ou par intervalle, l'orientation horizontale ou verticale, le pointeur et le clavier.

Éditeur en direct

function SliderExample() {
  const [value, setValue] = React.useState([25, 75]);

  return (
    <div className="grid w-full max-w-md gap-4">
      <div className="flex justify-between text-sm text-muted-foreground">
        <span>{value[0]}</span>
        <span>{value[1]}</span>
      </div>
      <Slider
        value={value}
        min={0}
        max={100}
        step={5}
        ariaLabels={["Minimum", "Maximum"]}
        onChange={setValue}
      />
    </div>
  );
}

Résultat

Loading...

import { Slider } from "niom-parts";

<Slider
  value={range}
  min={0}
  max={100}
  step={5}
  ariaLabels={["Minimum", "Maximum"]}
  onChange={setRange}
/>

Cas d'utilisation courants

Utilisez une valeur unique pour des reglages comme le volume et un intervalle pour les filtres bornes.

Éditeur en direct

function SliderUseCases() {
  const [volume, setVolume] = React.useState(40);
  const [years, setYears] = React.useState([2, 8]);

  return (
    <div className="grid w-full max-w-md gap-6">
      <div className="grid gap-2"><span className="text-sm">Volume: {volume}%</span><Slider value={volume} onChange={setVolume} ariaLabel="Volume" /></div>
      <div className="grid gap-2"><span className="text-sm">Experience: {years[0]}-{years[1]} years</span><Slider value={years} min={0} max={12} onChange={setYears} ariaLabels={["Minimum years", "Maximum years"]} /></div>
      <Slider value={60} onChange={() => {}} disabled ariaLabel="Locked value" />
    </div>
  );
}

Résultat

Loading...

Proprietes

Propriete	Type	Valeur par defaut
value	number | [number, number]	requis
min	number	0
max	number	100
step	number	1
onChange	(value: number | [number, number]) => void	requis
disabled	boolean	false
orientation	"horizontal" | "vertical"	"horizontal"
ariaLabel	string	-
ariaLabels	[string, string]	-
className	string	-