Slider

A range input for selecting a numeric value within a given range.

Basic Usage

With Value Label

40

Variants

60

60

Sizes

Custom Range and Step

25

Gradient fill

Set gradient to use the brand gradient as the track fill.

60

Browser limitation

gradient only renders in Firefox. WebKit (Safari, Chrome, Edge) shows the solid --tui-primary color because range-input pseudo-elements don't support background-image. The feature is progressive enhancement — non-Firefox users still get a fully functional slider, just without the gradient.

Mobile considerations

• Thumb is sized to a 24px minimum on pointer:coarse so it's grabbable with a finger.
• Touch drag works natively — no extra wiring needed.
• Pair with showValue on mobile so the user gets immediate numeric feedback (no hover-to-see-value).

Disabled

Props

Prop	Type	Default	Description
value	number	-	Controlled value
defaultValue	number	-	Default value (uncontrolled)
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step increment
onChange	(value: number) => void	-	Change callback
variant	'primary' | 'secondary'	'primary'	Color variant
size	'sm' | 'md' | 'lg'	'md'	Size
showValue	boolean	false	Show the current value label
gradient	boolean	false	Gradient track fill (Firefox only — WebKit shows solid color)
disabled	boolean	false	Whether the slider is disabled
className	string	-	Additional CSS class
style	CSSProperties	-	Inline styles