UX Patterns Guide
UI + UX Selection And Choice standard

Slider

Provide a labeled single-thumb slider with a known minimum and maximum, visible current value and unit, sensible step size, keyboard support, and an exact numeric entry path when precision matters.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • Users adjust one bounded value such as brightness, volume, opacity, zoom, intensity, cost tolerance, or preference strength.
  • Relative position, quick adjustment, or coarse tuning is more important than initial exact typing.
  • The product can define a meaningful min, max, step size, unit, and value label.

Avoid when

  • Users need to enter an exact, arbitrary, or high-stakes number.
  • The range is extremely large or has many indistinguishable steps.
  • There are only two states.
  • There are a few named choices that should be compared directly.
  • Users need to choose both lower and upper bounds.
  • The value is a date, category, command, consent, or destructive action.

Problem it prevents

Users need to adjust one bounded value, such as volume, brightness, opacity, or intensity, where relative position matters more than typing a precise number first.

Pattern anatomy

What a strong implementation has to make clear

User need

The value has a known lower and upper bound.

Pattern promise

Provide a labeled single-thumb slider with a known minimum and maximum, visible current value and unit, sensible step size, keyboard support, and an exact numeric entry path when precision matters.

Required state

Initial value state with visible label, min, max, current value, and unit.

Recovery path

The slider cannot be operated with keyboard or touch assistive technology.

Access contract

Prefer native range input where possible.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A Brightness slider shows 55%, dim and bright endpoint labels, visible focus, and a paired number input.
  • A discrete Volume slider uses 5% steps and shows the selected percentage near the thumb or label.
  • A user adjusts brightness with arrow keys, types 65 in the number field, sees both controls synchronize, and gets a warning near battery-heavy values.
  • A user enters 140, the value is repaired to the allowed maximum, and the interface explains the accepted value.
Weak implementation

Vague, hidden, hard to recover from

  • An unlabeled rail has no visible value, min, max, or unit.
  • A two-stop slider is styled like a switch but lacks on/off semantics.
  • A user tries to enter $812.37 with a huge slider and cannot land on the exact cents.
  • A user is asked to choose Small, Medium, or Large through a numeric rail with hidden labels.
UI guidance
  • Render one thumb on a track with a persistent label, visible current value, unit, min and max labels, focus state, and disabled or read-only state.
  • Use a native range input or fully implement slider semantics, value text, keyboard movement, and touch behavior for custom sliders.
UX guidance
  • Help users adjust one bounded value quickly when the relative position or intensity matters.
  • Provide a precise number input or choose a different control when users need exact, high-stakes, pasted, or named values.
Implementation contract

What the implementation must handle

States

  • Initial value state with visible label, min, max, current value, and unit.
  • Focused thumb state.
  • Dragging or actively adjusting state.
  • Keyboard increment and larger-step state.

Interaction

  • Moving the thumb changes one value within the declared minimum and maximum.
  • The current value remains visible in text and matches the thumb position.
  • Keyboard arrows adjust by one step; Home and End move to the range limits; Page Up and Page Down may move by larger steps.
  • Typed numeric fallback synchronizes with the thumb and uses the same min, max, and step rules.

Accessibility

  • Prefer native range input where possible.
  • Expose a label, minimum, maximum, current numeric value, and human-readable value text when the number alone is unclear.
  • Use text and shape, not color alone, for focus, active, warning, error, disabled, and read-only states.
  • Ensure keyboard users can adjust by small steps and jump to range ends.

Review

  • Is this one value inside a known range?
  • Do users care about relative position more than entering an exact number?
  • Are min, max, step size, current value, and unit visible and programmatic?
  • Would a number field, select, radio group, segmented control, toggle, or range slider make the task clearer?
Interactive lab

Inspect the states before you copy the pattern

Adjust one value along a range

Move a single-thumb slider, compare approximate and exact input paths, inspect keyboard increments, warning/error states, and reject binary or over-precise slider misuse.

Slider
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Initial value state with visible label, min, max, current value, and unit.

Keyboard / Access

Tab moves focus to the slider thumb or native range input.

Avoid Generating

Using a slider for a binary on/off choice.
Evidence trail

Source-backed claims behind this guidance

WAI-ARIA APG Slider Pattern

W3C Web Accessibility Initiative - checked

APG slider guidance defines range input semantics, value properties, value text, labels, orientation, keyboard movement, and touch assistive technology cautions.

Carbon Design System Slider

IBM Carbon Design System - checked

Carbon slider guidance distinguishes default single-value sliders from range sliders and documents labels, min and max, number input pairing, value display, states, and keyboard interaction.

U.S. Web Design System Range slider

U.S. Web Design System - checked

USWDS range slider guidance supports approximate relative selection, precise text-input alternatives, draggable track behavior, min/max labels, step granularity, and screen reader units.

Material Design Sliders

Google Material Design - checked

Material Design slider guidance supports intensity settings, continuous subjective ranges, discrete specific-value sliders, editable numeric value variants, and disabled states.

Visa Product Design System Slider

Visa Product Design System - checked

Visa slider guidance supports required labels, min/max values, units, checkbox/radio alternatives for small sets, binary-option avoidance, and discrete versus continuous behavior.

Full agent/debug reference

Problem Context

  • The value has a known lower and upper bound.
  • Users understand the answer as position, intensity, amount, or coarse adjustment along a scale.
  • The product can choose meaningful step increments and expose the current value in text.
  • The task controls one value, not a start and end range.
  • Users may still need an exact numeric value, warning, disabled state, or server-side range repair.

Selection Rules

  • Choose a slider for one adjustable numeric or relative value inside a known range.
  • Use a continuous slider for subjective intensity where exact value is not critical.
  • Use a discrete slider when each step is meaningful and users can perceive the difference between steps.
  • Pair the slider with a number input or value display when users need exactness, screen-reader clarity, or copyable values.
  • Use text input when users need to type a precise, large-range, arbitrary, financial, or pasted value.
  • Use select, radio group, or segmented control for a small set of named options.
  • Use toggle switch for true on/off settings.
  • Use range slider when users must set both a lower and upper boundary.
  • Avoid sliders for very large ranges, tiny ranges, binary choices, dates, destructive actions, and values with unclear units.

Required States

  • Initial value state with visible label, min, max, current value, and unit.
  • Focused thumb state.
  • Dragging or actively adjusting state.
  • Keyboard increment and larger-step state.
  • Discrete tick or step state when only certain values are allowed.
  • Exact numeric entry state when precision is needed.
  • Warning state for risky or unusual values.
  • Out-of-range repaired or validation error state.
  • Disabled dependency state.
  • Read-only review state.
  • Touch assistive technology tested state for custom implementations.

Interaction Contract

  • Moving the thumb changes one value within the declared minimum and maximum.
  • The current value remains visible in text and matches the thumb position.
  • Keyboard arrows adjust by one step; Home and End move to the range limits; Page Up and Page Down may move by larger steps.
  • Typed numeric fallback synchronizes with the thumb and uses the same min, max, and step rules.
  • Warnings, errors, disabled state, and repaired values are announced without losing the user's context.
  • The slider never hides multiple named choices, binary on/off state, or two-boundary range selection behind one thumb.

Implementation Checklist

  • Define min, max, step, initial value, unit, precision, and whether values are continuous or discrete.
  • Use native input type range when it satisfies the design and accessibility needs.
  • Provide a visible label and current value, and expose min, max, now, and value text to assistive technologies.
  • Add min and max labels or icons when the endpoints are meaningful.
  • Pair with a number input for exact values, large ranges, or values users may need to copy or paste.
  • Clamp, reject, or repair out-of-range values with explicit feedback.
  • Test keyboard, pointer, touch, screen reader, high zoom, forced colors, and mobile assistive technology behavior.
  • Avoid custom slider implementations unless the thumb, track, value text, focus, keyboard, and touch behavior are fully implemented.

Common Generated-UI Mistakes

  • Using a slider for a binary on/off choice.
  • Using a slider for exact financial, legal, account, or measurement values without a numeric field.
  • Hiding a small set of named options behind a numeric rail.
  • Using one slider for lower and upper range boundaries.
  • Omitting the label, current value, unit, min, or max.
  • Choosing a step size that is too fine to move efficiently or too coarse to match user needs.
  • Using sliders for dates or categories that are not numeric or ordered.

Critique Questions

  • Is this one value inside a known range?
  • Do users care about relative position more than entering an exact number?
  • Are min, max, step size, current value, and unit visible and programmatic?
  • Would a number field, select, radio group, segmented control, toggle, or range slider make the task clearer?
  • Does keyboard and touch assistive technology behavior work on the target devices?
Accessibility
  • Prefer native range input where possible.
  • Expose a label, minimum, maximum, current numeric value, and human-readable value text when the number alone is unclear.
  • Use text and shape, not color alone, for focus, active, warning, error, disabled, and read-only states.
  • Ensure keyboard users can adjust by small steps and jump to range ends.
  • Test touch assistive technologies before shipping custom sliders on touch-first surfaces.
  • Provide an exact numeric entry path when slider gestures are hard to operate or precision matters.
Keyboard Behavior
  • Tab moves focus to the slider thumb or native range input.
  • Right Arrow and Up Arrow increase the value by one step.
  • Left Arrow and Down Arrow decrease the value by one step.
  • Home sets the first allowed value.
  • End sets the last allowed value.
  • Page Up and Page Down may adjust by a larger step when that is useful.
  • Tab moves from the slider to the paired number input or next control without losing the selected value.
Variants
  • Continuous slider
  • Discrete slider
  • Slider with current value
  • Slider with number input
  • Slider with tooltip value
  • Slider with min and max labels
  • Read-only slider
  • Disabled slider
  • Vertical slider

Verification

Last verified: