Slider

A range input with a smooth draggable thumb, built on Radix UI Slider. Supports controlled and uncontrolled usage, custom step sizes, and min/max bounds.

Value: 40

Disabled

Usage

import { Slider } from "@bloomkit/react";
 
<Slider
  defaultValue={[50]}
  min={0}
  max={100}
  step={1}
  onValueChange={(value) => console.log(value)}
/>

Controlled

const [value, setValue] = useState([40]);
 
<Slider
  value={value}
  onValueChange={setValue}
  min={0}
  max={200}
  step={5}
/>

Props

Prop	Type	Default	Description
value	number[]	—	Controlled value (array supports range sliders in future)
defaultValue	number[]	—	Initial value for uncontrolled usage
onValueChange	(value: number[]) => void	—	Callback fired when the value changes
min	number	0	Minimum value of the slider
max	number	100	Maximum value of the slider
step	number	1	Increment step between values
disabled	boolean	false	Disable interaction with the slider
className	string	—	Additional Tailwind classes