Slider

Functional Variants

Visual Variants

Size Variants

Specialized Variants

• Color slider: A hue/saturation/lightness track for Color Pickers. Track background is a gradient.
• Time slider: Track represents a time span (video progress, schedule picker). May include buffered regions.
• Gradient slider: Track shows a gradient from one state to another (cold→hot, quiet→loud).

Slider Properties

Important: Use onChangeEnd (not onChange) for API calls or expensive operations. onChange fires on every pixel of thumb movement during drag — potentially 60+ times per second. onChangeEnd fires once when the user releases.

Design Token Mappings

Sliders touch many token categories across color, spacing, sizing, and motion. For the full token architecture, see the Design Tokens Complete Guide.

Slider States

Keyboard Interaction

These keyboard controls are required for WCAG 2.1.1 (Keyboard) compliance. For range sliders, Tab moves between thumbs.

Accessibility — Slider

Sliders are complex interactive widgets that must be fully operable via keyboard and properly announced by screen readers. Use the Contrast Checker to validate track, fill, and thumb visibility.

ARIA Pattern

The slider uses role="slider" with associated ARIA properties:

<!-- Single-value slider -->
<div class="slider-container">
  <label id="volume-label" for="volume-slider">Volume</label>
  <div class="slider-track">
    <div class="slider-fill" style="width: 70%"></div>
    <div role="slider"
         tabindex="0"
         id="volume-slider"
         aria-labelledby="volume-label"
         aria-valuenow="70"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuetext="70 percent"
         class="slider-thumb"
         style="left: 70%">
    </div>
  </div>
</div>

<!-- Range slider (two thumbs) -->
<div class="slider-container">
  <label id="price-label">Price range</label>
  <div class="slider-track">
    <div role="slider"
         tabindex="0"
         aria-label="Minimum price"
         aria-valuenow="20"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuetext="$20"
         class="slider-thumb">
    </div>
    <div role="slider"
         tabindex="0"
         aria-label="Maximum price"
         aria-valuenow="80"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuetext="$80"
         class="slider-thumb">
    </div>
  </div>
</div>

WCAG Success Criteria

aria-valuetext

For sliders where the numeric value isn't meaningful on its own, provide aria-valuetext:

<!-- Temperature with unit -->
<div role="slider" aria-valuenow="72" aria-valuetext="72 degrees Fahrenheit">

<!-- Rating scale -->
<div role="slider" aria-valuenow="3" aria-valuetext="3 out of 5, Good">

<!-- Price -->
<div role="slider" aria-valuenow="50" aria-valuetext="$50">

Screen readers will announce the aria-valuetext instead of the raw number, providing meaningful context.

Touch Targets

On mobile, the slider thumb must meet the 44×44px minimum touch target (WCAG 2.5.8, AAA, but practically essential). Even if the visible thumb is 20px, expand the hit area with transparent padding or a larger pseudo-element.

Do

• Pair sliders with a visible value display — either a tooltip on the thumb, a number beside the slider, or an adjacent Text Input that syncs bidirectionally.
• Use onChangeEnd for API calls and expensive operations. onChange fires continuously during drag.
• Provide marks for stepped sliders so users can see the discrete values they're choosing between.
• Set sensible min/max/step values. A 0–100 slider with step=1 has 101 possible values; a 0–1000 slider with step=1 has 1001 — the latter is too granular for a slider.
• Use filled tracks to reinforce the visual connection between the value and the minimum.
• Consider a combined slider + input pattern: the slider for quick approximate selection, the input for precise numeric entry. This is the best of both worlds.
• Ensure the thumb is at least 44px touchable area on mobile, even if visually smaller.
• Use aria-valuetext for units, labels, or descriptions: "72°F", "$50", "Medium."

Don't

• Don't use sliders for precise numeric entry. If users need to enter "73.5" exactly, a text input is better.
• Don't use sliders for very large ranges (1–10,000) without logarithmic scaling or stepped marks.
• Don't use sliders for non-obvious values. A slider for "number of employees" (1–10,000) gives no intuition about what "30% along the track" means.
• Don't use vertical sliders unless the context strongly calls for it (audio mixers, equalizers). Horizontal is the convention.
• Don't disable the slider without explanation. If a slider is disabled, show a tooltip or message explaining why.
• Don't make the track too thin on touch devices. A 4px track is extremely hard to tap. Use at least 8px on mobile or expand the touch area.
• Don't forget keyboard support. Many slider implementations are mouse-only, completely excluding keyboard and switch-access users.

Range Slider Specifics

• Prevent thumbs from crossing — enforce a minimum distance (minStepsBetweenThumbs)
• Tab between thumbs (first Tab = min thumb, second Tab = max thumb)
• Style the filled region between thumbs differently from the unfilled portions
• Label each thumb independently: "Minimum price" and "Maximum price"

Design System Implementations

Material Design 3 redesigned its slider with several notable features: the thumb rests directly on the track (no gap), the filled portion uses the primary color with a "stop indicator" (small dot) at the min and max positions, and discrete sliders show tick marks on the track. Material 3 supports a "range slider" with two thumbs and offers a tooltip-like "value indicator" that appears on interaction — a teardrop-shaped bubble above the thumb showing the current value. The animation is spring-based, with the value indicator scaling up from 0 when the thumb is pressed.

Ant Design provides a Slider component with range prop for dual-thumb mode, marks for labeled tick marks, step (set to null for marks-only snapping), tooltip configuration (always, hover, or custom formatter), and dots for rendering visible step dots on the track. Ant's range slider supports draggableTrack — you can drag the filled region between the two thumbs to move the entire range without changing its width.

Radix UI provides an unstyled Slider primitive with Root, Track, Range (the filled portion), and Thumb sub-components. It supports multiple thumbs natively (just render multiple Thumb children), handles keyboard navigation, and manages all ARIA attributes. Styling is entirely your responsibility — combine with Tailwind or CSS-in-JS.

Chakra UI's Slider uses a compound component API: Slider, SliderTrack, SliderFilledTrack, SliderThumb, and SliderMark. It supports colorScheme, orientation (horizontal/vertical), isReversed, and focusThumbOnChange. Chakra's range slider is a separate RangeSlider component with the same sub-component structure but two thumbs.

Headless UI does not provide a slider component — it focuses on disclosure widgets, menus, and modals. For headless slider behavior, Radix or React Aria (Adobe) are the go-to choices.

React Aria (Adobe's accessibility library) provides useSlider and useSliderThumb hooks that handle all ARIA attributes, keyboard interaction, and touch/mouse dragging. It's the most technically rigorous implementation, correctly handling RTL layouts, vertical orientation, and multi-thumb interactions.

Bootstrap doesn't offer a custom slider component — it relies on the native <input type="range"> with browser-default styling. Custom styling requires overriding vendor-prefixed pseudo-elements (::-webkit-slider-thumb, ::-moz-range-thumb), which is fragile and inconsistent across browsers.

For styling slider tracks and fills with accessible color combinations, use the Color Palette Generator. Preview thumb interaction animations in the Transition Generator.