Slider

Two variants: compact (spring-snapped thumb with track fill and range mode) and comfortable (pip-based discrete selector for settings panels).

Installation

npx shadcn@latest add https://www.fluidfunctionalism.com/r/slider.json

25—75

Volume: 40

Volume: 60

Opacity: 75%

Roundness2

Volume

50%

QualityMedium

Roundness2

Slider

Prop	Type	Default	Description
value	number \| [number, number]	—	Current value. Pass an array to enable range mode with two thumbs.
onChange	(value: SliderValue) => void	—	Called when the value changes via drag, click, or keyboard.
min	number	0	Minimum value.
max	number	100	Maximum value.
step	number	1	Step increment. Thumb snaps to the nearest step during drag.
showSteps	boolean	false	Render dot indicators at each step position on the track.
showValue	boolean	true	Whether to display the current value label.
valuePosition	"left" \| "right" \| "top" \| "bottom" \| "tooltip"	"left"	Position of the value label. "tooltip" shows above the thumb during interaction.
formatValue	(v: number) => string	String	Custom formatter for the value label.
label	string	—	Accessible label for the slider, also shown as prefix in the value display.
disabled	boolean	false	Disables all interaction.

SliderComfortable

Prop	Type	Default	Description
value	number	—	Current selected value.
onChange	(value: number) => void	—	Called when the value changes via click, drag, or keyboard.
min	number	0	Minimum value.
max	number	100	Maximum value.
variant	"pips" \| "scrubber"	"pips"	Visual mode. "pips" shows discrete dot indicators. "scrubber" shows no dots — drag anywhere in the row to set a continuous value.
step	number	1	Step increment for snapping. In pips mode, also determines the number of dots rendered.
label	string	—	Label shown on the left side. Transitions from muted to foreground on hover.
formatValue	(v: number) => string	String	Custom formatter for the value shown on the right.
disabled	boolean	false	Disables all interaction.