Slider

A slider selects a value along a range by dragging a handle. It communicates position well and exact values poorly, and the whole design question is which of those the task needs.

Where it fits

The value is approximate. Volume, opacity, brightness, a rough budget filter. Nobody has 63% in mind; they have "a bit quieter".

The range has meaningful bounds that are worth seeing. Somebody can tell at a glance that they are near the top of what is possible.

Live feedback exists. Dragging a brightness slider against a live preview is the best case for this control, because the result is the readout.

Where it does not

An exact figure. A price, a quantity, a timeout in seconds. Somebody who knows they want 30 should type 30. Making them drag toward it is an obstacle dressed as an interaction.

A wide range with fine precision. A 300-pixel track across 0 to 10,000 gives about 33 units per pixel. Any requirement finer than that is not achievable by dragging, and adding steps only reduces what can be chosen.

Few discrete options. Three or four choices are a segmented control or a radio group, not a slider with three stops.

Pair it with a number

The strongest version of this component is a slider and an editable numeric field showing the same value.

Drag for approximate, type for exact. Both paths available at once, neither taxed. This removes almost every argument against the control, and it is skipped in most implementations because the slider alone looks cleaner in a mockup.

At minimum, show the value as text. A handle position with no number asks people to estimate from geometry.

Range sliders

Two handles, a minimum and a maximum. Standard in price and date filters.

They double the interaction cost and are the most common accessibility failure in this family: two thumbs that share one label, announce the same value, and cannot be told apart by a screen reader.

If you ship one, give each thumb its own label and value, and pair it with two inputs.

Accessibility and touch

Arrow keys for single steps, page up and down for larger jumps, home and end for the bounds.

Announce the value as it changes, with units.

44 points minimum on the handle. Default library handles are frequently 16 or 20 pixels, which is comfortable with a mouse and a poor experience with a thumb.

Do not rely on the drag alone — a track that responds to a click jumps the value to that point, which is faster than dragging for large moves.

In practice

A pricing calculator uses a slider for seat count, 1 to 500, on a 320-pixel track.

Sales hears that prospects cannot land on 50. The track gives about one and a half seats per pixel, so the handle lands on 48 or 51, and somebody comparing a quote against a budget does this four or five times before giving up and writing in.

The fix is not a longer track. It is a number field beside the slider, which turns a dragging exercise into typing "50".

The slider stays because scanning the price curve across the range is genuinely useful. It just stopped being the only way in.

Where teams get it wrong

• A slider for an exact value. Dragging toward a number somebody already knows.
• No readout. Estimating a value from a handle position.
• A wide range on a short track. Precision that is not physically available.
• Range sliders with one label. Two thumbs indistinguishable to a screen reader.
• Small handles. Comfortable with a mouse, poor with a thumb.
• Drag as the only input. No click on the track, no arrow keys.