Slider or number field?

Use a slider when exploring a range feels right and rounding error is acceptable. Use a number field when someone will type 37 or step by one. Many products show both: the slider for exploration and the number beside it for precision.

Should the current value be visible?

Yes. Show the number beside the label or under the track. A slider with no readout forces people to guess.

What step size should I use?

Match the precision people need. Volume often steps by 1. A price filter on a shopping site might step by 5 or 10. Too fine a step on a long track makes the handle hard to land on.

Can a slider have two handles?

Yes, for a minimum and maximum, like a date or price band. Label both values and make sure keyboard users can reach both thumbs.

Which way should the track run?

Low on the left, high on the right in left-to-right layouts. Vertical sliders are rare outside audio mixers and should be labelled clearly.

What about touch targets?

The thumb should meet WCAG 2.5.8 for target size where you can. If the visual handle is small, expand the hit area without changing the painted size.

Slider

A slider sets a value by dragging a handle along a range. It suits values where close enough is the answer people want.

Forms and inputBuild difficulty: Medium<input type="range">

Also called Range slider, Track.

Volume40%

Drag the handle, or focus it and use the arrow keys. The value updates as you move.

For designers

A slider trades precision for speed. iOS brightness, Spotify volume and any photo editor exposure control all let someone land near the right level without typing. That works when the person cares about more or less, not about 37 versus 38.

The cost is exactness. Ask someone to set 42 percent with a mouse and you will get 41 or 43. Pair the slider with a visible value, or offer a number field beside it when both exploration and precision matter.

Mark the ends of the track when the scale is not obvious. A volume slider from 0 to 100 may need no labels. A price filter from £0 to £500 benefits from min and max at the ends so people know what the extremes mean before they drag.

Use a slider when

The exact number matters less than the general level, like volume or brightness
The range has clear minimum and maximum values everyone understands
Seeing the value move along a track helps the decision

Reach for something else when

The person already knows the exact number and will type it. Use a number field instead.
The value needs fine steps across a wide range, like a price up to £10,000. Use a number field instead.
There are only three or four discrete settings. Use a segmented control instead.
The control toggles a single on or off state. Use a switch instead.

Variants

Brightness70%

Price range£25 – £75

A labelled slider with the value beside the label, and a range with two handles for a minimum and maximum.

With value label. The current number sits beside the field name. This is the default for anything that submits a numeric value.

Range. Two handles set a minimum and maximum. Common in price filters and scheduling windows.

Vertical. The same control turned on its side. Reserve it for layouts where horizontal space is scarce and the metaphor is already familiar, like audio faders.

How to build a slider

The browser gives you a native range input. Style the track and thumb, or rebuild with divs and ARIA. Either way, expose min, max, step and the current value.

<label for="volume">Volume</label>
<span id="volume-output">40</span>
<input
  id="volume"
  type="range"
  name="volume"
  min="0"
  max="100"
  step="1"
  value="40"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="40"
  aria-valuetext="40 percent"
/>

Arrow keys nudge the value when the input has focus. Page Up and Page Down take larger jumps if you wire them. Update aria-valuenow and the visible label on every change. The detail people rebuild wrong is forgetting to link the output text to the input with aria-labelledby or a live region.

On touch screens, the thumb needs a hit area larger than the painted circle. Expand the touch target in CSS while keeping the visual handle the same size. WCAG 2.5.8 asks for at least 24 by 24 CSS pixels where you can.

Edge cases

Disabled ranges. Grey out the track and skip it in tab order when the value cannot change. Say why in text nearby.

Logarithmic scales. Brightness and audio often feel linear to the eye but logarithmic to the ear. If the steps feel wrong at one end of the track, adjust the step mapping in script rather than fighting the native control.

Reduced motion. The thumb can jump between values without easing. Respect prefers-reduced-motion: reduce if you animate the fill.

Form submit. Sliders usually submit their value with the rest of the form. If the change applies immediately, like volume in a player, say so and skip a save button for that control alone.

Common questions

Slider or number field?: Use a slider when exploring a range feels right and rounding error is acceptable. Use a number field when someone will type 37 or step by one. Many products show both: the slider for exploration and the number beside it for precision.
Should the current value be visible?: Yes. Show the number beside the label or under the track. A slider with no readout forces people to guess.
What step size should I use?: Match the precision people need. Volume often steps by 1. A price filter on a shopping site might step by 5 or 10. Too fine a step on a long track makes the handle hard to land on.
Can a slider have two handles?: Yes, for a minimum and maximum, like a date or price band. Label both values and make sure keyboard users can reach both thumbs.
Which way should the track run?: Low on the left, high on the right in left-to-right layouts. Vertical sliders are rare outside audio mixers and should be labelled clearly.
What about touch targets?: The thumb should meet WCAG 2.5.8 for target size where you can. If the visual handle is small, expand the hit area without changing the painted size.

Last reviewed 27 AUG 2026