Input

Slider

Picks a number within a range by dragging a knob along a track.

Volume 40

Also known as

A horizontal line with a round knob. The part of the line before the knob is often filled with the accent color.

Dragging the knob or clicking the track changes the value.
Best when the exact number matters less than the rough position, such as volume or brightness.
The value moves in fixed steps; this demo uses steps of 5.

Key	Action
`→ / ↑`	Increases the value by one step.
`← / ↓`	Decreases the value by one step.
`Home`	Sets the minimum value.
`End`	Sets the maximum value.
`Page Up / Page Down`	Changes the value by a larger amount (depends on the browser).

Number input: A slider picks a rough position by dragging; a number input is better when the exact number matters.