Key insights
- Dragging is imprecise — a finger can't reliably land on an exact value, so the readout flickers between 47 and 48. Design around that imprecision instead of pretending it isn't there.
- Fill the track. The filled length left of the thumb is the value, readable at a glance. A bare, unfilled track forces users to eyeball the thumb position and guess.
- Make the whole row draggable. A 4px hairline is a moving target that cursors keep missing — expand the hit area to the full row so grabbing the slider is effortless.
- Snap to steps when clean values matter. Free continuous dragging lands on ugly numbers like 47.3; snapping to defined increments (with visible ticks) keeps values round — nobody wants 47.3.
- Float the value in a tooltip above the thumb while dragging, so the exact number stays visible right where the eye already is.
- Support a two-thumb range with a filled band between the handles for min/max cases like price filters, and make it keyboard-operable: arrows step by one, Home and End jump to the extremes.
Do / Don't
- Do: Show a filled track plus a live readout so the value is legible without guessing
- Do: Expand the drag target to the full row instead of just the thin track
- Do: Snap to steps and float a value tooltip above the thumb while dragging
- Don't: Rely on a 4px hairline as the only hit target
- Don't: Leave a slider continuous when users need clean, round values
- Don't: Ship a slider that can't be driven with arrow keys, Home, and End
