Slider
A control for selecting a value along a range — precise enough for approximations, wrong wherever an exact number matters.
UI ComponentsA slider is good at “roughly here” and bad at “exactly this”. Volume, opacity, zoom, a price filter — all fine, because being a few units off costs nothing. A loan amount, a transfer, a quantity that will be invoiced — not fine, because the control's precision depends on the pixel width available and the steadiness of the user's hand.
Where a range genuinely helps but the number also matters, pair the slider with a numeric input bound to the same value. People drag to get close and type to land exactly, and the field gives keyboard and screen-reader users a path that dragging never will. Always show the current value; a slider whose position is the only readout is unusable on touch, where the thumb is under a finger.
In practice
A loan calculator used a slider alone for the amount, stepping in units of €100 across a 320px track. Applications clustered on round numbers that no applicant had chosen deliberately. Adding a bound numeric input beside it moved 38% of interactions to typing, and the average requested amount shifted by about €400 — closer to what people actually wanted.
Where teams get it wrong
- A slider as the only input for a value that must be exact.
- No visible current value, so the thumb position is the entire readout.
- Thumbs smaller than a comfortable touch target.
- Ranges so wide that one pixel is a meaningful jump.
- Two-handle range sliders whose handles can cross or overlap with no way to separate them.
Learn more
You may ask
Frequently Asked Questions
When should you use a slider instead of a number input?
When the value is approximate and the range is what matters — volume, opacity, a price filter. For anything people will check against a figure they have in mind, use a number input, or pair the two.
Are sliders accessible?
They can be: native range inputs support arrow keys and announce value, minimum and maximum. Custom slider implementations frequently drop all three, which leaves keyboard and screen-reader users with no way to set the value.
Related terms
All terms- Input FieldThe control a person types into — the most-used element in most products and the one where small decisions cost the most.
- Filter (UI)Controls that narrow a set of records — and the much harder job of keeping what was narrowed visible.
- Form DesignDesigning the fields, sequence, validation and error handling of a form so people can finish it without stopping to think.
- Progress BarA determinate indicator showing how much of a known task is done — usable only when the total is actually known.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us