Slider

Stable

A single-thumb slider for picking a number in a range, with an optional value readout.

Also known as range, range slider, range input

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

function Example() {
  const [v, setV] = useState(40);
  return <div className="w-72"><Slider value={v} onChange={setV} label="Volume" /></div>;
}

The value runs from 0 to 100 by default.

Usage Code Design Accessibility

When to use it

Lets a person pick a number from a range by dragging or using the arrow keys. It suits settings where a rough value is fine.

Made of: Track · Filled track · Thumb · Value text

Use it for

A setting with a clear minimum and maximum, such as creativity or volume.
A value that people adjust and compare by feel.
A number with steps, such as a length in rounds of 256.

Not for

A number where the exact value must be typed: use NumberField.
A few named levels: use SegmentedControl.
Free text: use TextField.

Do and avoid

$120

Do. A rough limit people can drag, with the value shown.

Avoid. Dragging to an exact amount is fiddly, and the value is hidden.

Do

Show the value, so people know what they have picked.
Pick a step that matches how precise the setting needs to be.
Use formatValue when the number has a unit.
Give the slider a width. It fills the space it is given.

Avoid

Do not use a Slider when people need to enter an exact number. Use a NumberField.
Do not use it for a few named choices. Use a SegmentedControl.
Do not use it for a range with two ends. It has one thumb.
Do not rely on the filled track alone to show the value.

On a phone

The slider is 44px tall on touch screens, so the thumb is easy to grab even though it is drawn 20px wide.
It stretches to fill the width of its container, with the value shown beside it when showValue is on.
It is the browser's own range input, so a finger drags it directly; for exact numbers, pair it with a NumberField.

Properties

Prop	Type	Default	Description
valuerequired	number	none	Current value. The component is fully controlled.
onChangerequired	(value: number) => void	none	Called with the new number while the thumb moves.
labelrequired	string	none	Accessible name, applied as aria-label.
min	number	0	Lowest value.
max	number	100	Highest value.
step	number	1	Size of each step.
showValue	boolean	none	Shows the current value as text to the right.
formatValue	(value: number) => string	none	Turns the number into text. Used for the visible value and for aria-valuetext.
disabled	boolean	none	Dims the slider, skips it in the tab order and blocks changes.
id	string	none	Id on the input. A generated one is used if you leave it out.
className	string	none	Classes for the row that holds the slider and the value text.

"Show code under the preview gives the code for the example on the stage."

In Figma

In Figma, one Slider switches all of this from its properties panel, across 10 variants. Each property sets the React prop beside it, so design and code use the same names.

Slider in Figma: each property and the React prop it sets
Figma property	React	Values
Show value	`showValue`	On or off
State	Hover, Pressed and Focus come from the browser. Disabled sets `disabled`.	Default, Hover, Pressed, Focus, Disabled

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

hover: The pointer shows a hand over the slider.
focus: A visible focus ring appears when you reach the slider with the keyboard.
dragging: While the thumb moves, onChange is called with each new value and the filled track follows it.

Tokens

Change one of these and every part that uses it follows.

--accent
--border-strong
--surface
--fg-muted
--focus-ring

Basic slider