Slider

Collect a bounded value as a bare number and the user answers without knowing two things: what the allowed range is, and where the number they typed sits inside it. A field showing 60 gives no hint about whether that is high or low.

Pagedeck's document export screen worked that way. One field took image quality as a number from 1 to 100, and most users exported with the default of 80 untouched. One user typed 200 hoping for something better and got an error message instead. When Noa went through the records, only 3 percent of users had ever changed the quality value. The field collected an answer without telling anyone what to put in it.

A slider makes the range visible. The left end of the track is the minimum and the right end is the maximum, so the handle's position alone communicates where the current value sits. Out-of-range values also stop happening, because the handle can't travel past the ends of the track.

Dragging a handle along a track turns its position into a value. Four parts are visible on screen.

1. The track — the full span a value can occupy. Label the minimum and maximum at each end and the step of guessing the range disappears.
2. The handle — the position of the current value, and the thing the user drags. On touch screens, make the touch area at least 44 by 44 pixels regardless of how large the handle looks. Smaller than that and people lose their grip mid-drag.
3. The filled portion — everything from the minimum up to the handle, in a different color. That color communicates roughly where the value sits without any number at all. It's the part people read first, before the digits register.
4. The current value — shown as a number above the handle or beside the track. Some designs show it only while dragging; show it permanently when the value is something a user has to report to someone else.

Three settings get decided when it's built: minimum, maximum, and the step size for one movement. A step of 1 turns a range of 1 to 100 into a hundred stops; a step of 5 makes twenty. Steps that are too fine make it hard to land on the value you want, and steps that are too coarse put the value you want between stops, where it can't be chosen at all. A reasonable way to pick the step is to ask how many stops a user could actually tell apart.

Interaction isn't only dragging. Pressing an empty part of the track should move the handle to that point, and with the handle focused, arrow keys should move it one step at a time. Whether it works from the keyboard is the first thing an accessibility review catches — accessibility being the work of making a product usable regardless of disability or circumstance. Marking things up so a screen reader announces the current value together with the range gets decided in the same pass. A slider that answers only to a mouse drag shuts out everyone navigating by keyboard.

Two handles turn it into a range slider, as in a price filter where a minimum and maximum get set together. Stop the handles from crossing each other, and make it clear which one is grabbed when they overlap. Indistinguishable handles are the most common bug in this shape.

It suits values where the approximate position matters more than the exact number. Image quality, volume, screen brightness — anything where a user can't tell 78 from 80. It fits even better when the result changes as you drag: if the preview blurs while quality comes down, people stop based on the result rather than the number. The slider and the preview become one control that way.

Four places call for something else.

1. When the exact value matters — amounts of money or head counts belong in a text input, the element that takes typed characters. Landing on exactly 37 people with a slider takes a steady hand.
2. When there are few options — for low, medium, and high, laying them out as radio buttons is faster. That's the element for picking one of several, and with all three visible the choice takes a single action.
3. When the range is very wide — fitting 1 to 100,000 into 300 pixels of screen means one pixel moves the value by 333. Break the range into bands with a select instead, or add a number field alongside.
4. Dates — a date picker exists for choosing on a calendar.

A value with only two states doesn't get a slider either. That's what a toggle is for. They can look similar, but a toggle switches between two states while a slider handles a continuous range.

"Let's make this a slider. Which end it's near matters more than the exact number."

Showing the position inside a range serves better here.

"Set the step to 5. At 1 you can't land on the value you want."

Adjusting how far one movement travels.

"Put a number field next to the slider as well."

Adding a second route for users who want an exact value.

Noa turned the quality field into a slider. The range stayed 1 to 100 but the step went to 10, making ten stops, and the preview image changed while the handle moved. Estimated file size sat to the right of the track.

After the change, users who touched the quality value went from 3 percent to 21 percent, and the range error message disappeared. What arrived instead was a request for exactly 95 for print output, so Noa added a number field beside it.

The most common belief is that a slider is always easier than a number field. Only dragging is involved, so it looks that way. But the moment a value has to be exact, it inverts. Hitting exactly 95 with a finger on a 300-pixel track takes longer than typing two characters, and after a few misses people stop coming back to that screen. A number field is slower to reach and impossible to miss. Easy when the target is vague and hard when it's precise is the nature of this element.

The other common belief is that tick marks solve the precision problem. Draw lines every 10 units under the track and it looks like the handle will settle on them. In practice the ticks don't change how wide a fingertip is, so with ticks 30 pixels apart the handle still lands one notch over. Precision comes from adding a number field or coarsening the step, not from ticks. Left alone, the screen looks more precise while the set of reachable values stays exactly as it was.