UI Terms visual dictionary

Components

Slider

A draggable handle on a track that lets the user pick a value, or range of values, from a continuous scale.

Volume
62
62
Brightness
38

Sliders are best for values where the exact number matters less than the relative position: volume, brightness, opacity, price range. They support keyboard arrow keys for fine adjustment. Native HTML provides `<input type="range">`, and the ARIA `slider` role covers custom implementations. A scrubber on a video player is a slider with a time scale.

Also called

range sliderrange inputtrack

When to use

  • Continuous values where approximate is fine (volume, brightness)
  • Range filters with min and max handles (price, dates)
  • Visual settings where the user wants live feedback as they drag

When not to use

  • Precise numeric input (use a number field or stepper)
  • Small numbers of discrete options (use a select or segmented control)
  • Touch interfaces with thin tracks that are hard to grab

Related

ScrubberStepperSwitch

Source

W3C ARIA Authoring Practices Guide ('Slider'). Native HTML: `<input type="range">`. Radix UI, React Aria, Material Design all ship sliders.

Read the W3C ARIA pattern →