Build Assets
UI Component

Slider

Draggable control for selecting a value from a continuous or stepped range.

Platform: bothTags: form, input, range, control

Purpose

Lets users pick a value within a known range where the exact number matters less than the relative position. Prefer over a text field when the range is bounded and adjustment is exploratory (volume, brightness, price range).

Anatomy

  • Track: full-width rail, 4px height, neutral background
  • Fill: accent-colored portion from start to the thumb
  • Thumb: 16–20px circle with 2px border, subtle shadow
  • Optional value label: shown above the thumb or beside the track
  • Optional tick marks: for stepped/discrete ranges

States

  • Default: neutral track, accent fill, resting thumb
  • Hover: thumb grows slightly, cursor grab
  • Focus: 2px focus ring around the thumb for keyboard users
  • Active/Dragging: cursor grabbing, value label pinned visible
  • Disabled: 40% opacity, no pointer events

Tokens

spacing

trackHeight: 4pxthumbGap: 0px

sizing

thumbSize: 18pxtrackRadius: 2pxhitTarget: 44px

Do

  • Show the current value when precision matters
  • Support arrow-key nudging and Home/End for min/max
  • Snap to steps when only discrete values are valid
  • Keep the interactive hit target at least 44px tall even if the rail is thin

Don't

  • Use a slider when users need to enter a specific exact number - use a field
  • Hide the selected value for ranges wider than ~10 steps
  • Make the thumb smaller than the touch target
  • Use for binary choices - that is a toggle

Accessibility

  • Use role="slider" with aria-valuemin, aria-valuemax, aria-valuenow
  • Add aria-valuetext for non-numeric or formatted values (e.g. "$50")
  • Full keyboard support: Arrow keys, Home, End, PageUp/PageDown
  • Visible focus ring on the thumb

Code Example

<input
  type="range"
  min="0" max="100" step="1"
  value="40"
  aria-label="Volume"
/>