Slider

Single or multi-thumb range slider built on Radix's Slider primitive.

function Demo() {
const [value, setValue] = useState([50]);
return (
  <Slider
    label="Volume"
    value={value}
    onValueChange={setValue}
    formatValue={(v) => `${v}%`}
  />
);
}
render(<Demo />);

Editable — change the code above and the preview updates live.

Range selection

Pass a two-value array to get a min/max range with two thumbs.

function Demo() {
const [value, setValue] = useState([20, 80]);
return (
  <Slider
    label="Price range"
    value={value}
    onValueChange={setValue}
    formatValue={(v) => `$${v}`}
  />
);
}
render(<Demo />);

Editable — change the code above and the preview updates live.

Installation

import { Slider } from "@labanaat/ui/slider";

Props

Prop	Type	Default	Description
value / defaultValue	number[]	—	Controlled / uncontrolled value(s); a two-value array enables range mode
onValueChange	(value: number[]) => void	—	Change handler
min / max	number	0 / 100	Bounds
label	string	—	Field label
formatValue	(value: number) => string	—	Formats the value shown next to the label