Slider

A slider for selecting a single value or a range, with built-in track, thumb rendering, and an optional value display.

$npx shadcn add @patchui/slider

Single Value

With Value Display

Range

20 – 80

Custom Step

Disabled

Usage

import { Slider, SliderValue } from "@patchui/react";
 
// Single value
<Slider defaultValue={50} />
 
// With value display
<Slider defaultValue={50}>
  <SliderValue />
</Slider>
 
// Range (two thumbs)
<Slider defaultValue={[20, 80]} />
 
// Custom step
<Slider defaultValue={50} step={10} min={0} max={100} />
 
// Controlled
const [value, setValue] = useState(30);
<Slider value={value} onValueChange={(v) => setValue(v)} />

Props

Slider

Prop	Type	Default	Description
defaultValue	number \| number[]	[min]	The initial value. Pass an array for a range slider with multiple thumbs.
value	number \| number[]	-	The controlled value. Use with onValueChange.
min	number	0	The minimum allowed value.
max	number	100	The maximum allowed value.
step	number	1	The step increment. The slider snaps to multiples of this value.
orientation	"horizontal" \| "vertical"	"horizontal"	The orientation of the slider.
disabled	boolean	false	Disables the slider, preventing interaction.
onValueChange	(value, details) => void	-	Callback fired while the slider value changes (during drag or keyboard input).
onValueCommitted	(value, details) => void	-	Callback fired when the user finishes dragging or releases the slider.
className	string	-	Additional CSS classes applied to the slider root.

SliderValue

Prop	Type	Default	Description
className	string	-	Additional CSS classes applied to the value display.

Notes

Range slider: Pass an array to defaultValue or value (e.g. [20, 80]) to create a range slider with two thumbs. The slider automatically renders one thumb per value.
Value display: Nest <SliderValue /> inside <Slider> to show the current value. For range sliders, it displays both values separated by an en-dash.
onValueChange vs onValueCommitted: Use onValueChange for real-time updates (e.g. live preview). Use onValueCommitted for final values (e.g. saving to a database).
Thumb alignment: Thumbs are edge-aligned by default, meaning they don't overflow the track at the min/max positions.