Slider

Basic

import { Slider } from '@eekodigital/raster';

const [value, setValue] = useState([50]);

<Slider.Root value={value} onValueChange={setValue} aria-label="Volume">
  <Slider.Track />
  <Slider.Thumb aria-label="Volume" />
</Slider.Root>

Range

Use two thumbs for selecting a range between a minimum and maximum.

const [value, setValue] = useState([20, 80]);

<Slider.Root value={value} onValueChange={setValue} aria-label="Price range">
  <Slider.Track />
  <Slider.Thumb aria-label="Minimum price" />
  <Slider.Thumb aria-label="Maximum price" />
</Slider.Root>

Step

The step prop snaps the thumb to discrete intervals.

<Slider.Root value={value} onValueChange={setValue} min={0} max={100} step={10} aria-label="Steps">
  <Slider.Track />
  <Slider.Thumb aria-label="Steps" />
</Slider.Root>

Disabled

<Slider.Root value={[40]} disabled aria-label="Volume">
  <Slider.Track />
  <Slider.Thumb aria-label="Volume" />
</Slider.Root>

Props — Root

Prop	Type	Default	Description
value	number[]	—	Controlled value(s).
defaultValue	number[]	—	Uncontrolled initial value(s).
onValueChange	(value: number[]) => void	—	Called when value changes.
min	number	0	Minimum value.
max	number	100	Maximum value.
step	number	1	Step interval for snapping.
disabled	boolean	false	Prevents interaction.
orientation	”horizontal” | “vertical"	"horizontal”	Slider orientation.
className	string	—	Additional CSS classes.