Slider

A styled range input for selecting a numeric value within a defined range, with optional label, hint, and current value display.

Installation

npx dafink-ui add slider

Demo

Volume

Drag or use arrow keys to adjust.

Disabled

Props

Name	Type	Default	Description
value	number	-	Controlled current value.
onValueChange	(value: number) => void	-	Called with the new numeric value on change.
min	number	0	Minimum value.
max	number	100	Maximum value.
step	number	1	Increment between selectable values.
disabled	boolean	false	Disables the slider.
label	string	-	Visible label above the track; links to the input via id.
hint	string	-	Helper text below the track.
showValue	boolean	false	Shows the current numeric value next to the label.
size	'default' \| 'sm'	'default'	"sm" renders a shorter row and thinner track for dense layouts.
tone	'brand' \| 'current'	'brand'	"current" derives track/fill/thumb color from currentColor instead of the brand token, for sliders placed on an arbitrary colored surface (e.g. inside a colored chat bubble).
ariaLabel	string	-	Sets aria-label on the input directly; use when there is no visible label.
ariaValueText	string	-	Overrides the announced value with a custom string, e.g. a formatted timestamp.
className	string	""	Additional classes merged onto the root wrapper.

Accessibility

Slider has no custom keyboard handling of its own — it's a single native input type="range", so all keyboard interaction comes from the browser's built-in range-input behavior. Tab reaches it as one stop; the component mirrors the resulting value visually (fill width, thumb focus ring) rather than intercepting or reimplementing any of it.

Key	Function
`right arrow`	Increases the value by one step.
`up arrow`	Increases the value by one step.
`left arrow`	Decreases the value by one step.
`down arrow`	Decreases the value by one step.
`home`	Jumps to the minimum value.
`end`	Jumps to the maximum value.
`page up`	Increases the value by a larger increment (native browser behavior).
`page down`	Decreases the value by a larger increment (native browser behavior).