Inputs/Slider

Slider

An input where the user selects a value from within a given range.

Themed

When to Use

Use Slider when you need to:

  • Let users select a numeric value within a continuous range (e.g., volume, brightness)
  • Provide a visual representation of where a value falls within bounds
  • Allow range selection with two thumbs (e.g., price range, date range)
  • Offer quick, imprecise adjustments where approximate values are acceptable
  • Control real-time parameters like audio levels, opacity, or zoom

When Not to Use

  • Precise numeric entry - use Input with type="number"
  • Displaying read-only completion status - use Progress
  • Collecting star-based feedback - use Rating
  • Binary on/off toggling - use Switch

Default

A simple slider with default settings.

With Value Display

Controlled slider showing the current value in real time.

Value: 50

Range

Range slider with two thumbs for selecting a value range.

Range: 25 - 75

Steps

Different step intervals for coarse or fine control.

Disabled

Disabled slider that prevents user interaction.

With Label

Slider paired with a label and live value display for accessibility and clarity.

75%

Form Example

Multiple sliders composed in a settings panel layout.

Display Settings

80%
50%
100%

UX & Design Guidelines

Visual Hierarchy

The slider track uses bg-muted for the unfilled portion and bg-primary for the filled range, creating a clear visual distinction. Always pair sliders with a visible value label or tooltip so users know the exact value they are selecting. For range sliders, display both the minimum and maximum selected values.

Spacing & Layout

Constrain slider width with max-w-sm or w-[60%] to prevent overly wide tracks on large screens. When grouping multiple sliders (e.g., settings panels), use consistent space-y-5 or space-y-6 between each slider group. Place the label above and the value readout to the right for a clean, scannable layout.

Responsive Behavior

The thumb is size-4 (16px) by default, which meets minimum touch target guidelines when accounting for the hover/focus ring expansion. On mobile, ensure surrounding padding is generous so the thumb is easy to grab. The slider supports orientation="vertical" for use cases like audio mixers where vertical layout is more natural.

Color & Contrast

The filled range uses bg-primary against the bg-muted track, meeting WCAG 2.1 AA contrast requirements. The thumb has a border-primary outline with a white fill for visibility in both light and dark modes. Disabled sliders reduce opacity to 50% while maintaining readability.

Accessibility

Keyboard Navigation

  • Tab — Move focus to the slider thumb
  • Arrow Right / Arrow Up — Increase value by one step
  • Arrow Left / Arrow Down — Decrease value by one step
  • Home — Set value to minimum
  • End — Set value to maximum
  • Page Up / Page Down — Increase or decrease value by a larger step

Screen Reader Support

  • Each thumb has role="slider" with proper aria-valuenow, aria-valuemin, and aria-valuemax
  • Always provide aria-label or associate with a visible Label via matching id/htmlFor
  • Use aria-valuetext for custom value announcements (e.g., "72 degrees Fahrenheit")
  • Disabled state is announced via the data-disabled attribute on the root

Focus Management

The thumb displays a visible focus ring using focus-visible:ring-4 with ring-ring/50 for clear focus indication. For range sliders, Tab moves focus between each thumb sequentially. Focus states meet WCAG 2.1 Level AA requirements.

Touch Targets

The thumb is 16px with an expanded interactive area via the hover/focus ring (4px ring expansion), bringing the effective target to 24px. The entire track is clickable to jump to a value, providing a larger hit area on touch devices. For critical touch interactions, increase thumb size with className overrides on the root.

ARIA Attributes

{/* Slider with visible label */}
<Label htmlFor="volume">Volume</Label>
<Slider id="volume" defaultValue={[50]} max={100} />

{/* Slider with aria-label (no visible label) */}
<Slider aria-label="Brightness" defaultValue={[75]} max={100} />

{/* Slider with aria-valuetext for custom announcements */}
<Slider
  aria-label="Temperature"
  defaultValue={[72]}
  min={60}
  max={90}
  aria-valuetext={`${value} degrees Fahrenheit`}
/>

{/* Range slider with described purpose */}
<Slider
  aria-label="Price range"
  defaultValue={[20, 80]}
  max={100}
  aria-describedby="price-hint"
/>
<span id="price-hint" className="sr-only">
  Select minimum and maximum price
</span>

Related Components

Progress

Read-only indicator showing completion progress of a task.

Input

Text input for precise numeric entry when exact values matter.

Rating

Star-based rating input with half-star precision for feedback collection.

Switch

Binary toggle control for on/off states instead of continuous ranges.

API Reference

The Slider component accepts the following props in addition to standard Radix UI Slider attributes.

PropTypeDefaultDescription
valuenumber[]—The controlled value of the slider. Use array for range sliders.
defaultValuenumber[]—The default value when initially rendered (uncontrolled).
onValueChange(value: number[]) => void—Event handler called when the value changes during interaction.
onValueCommit(value: number[]) => void—Event handler called when value change is committed (on pointer up).
minnumber0The minimum value of the slider.
maxnumber100The maximum value of the slider.
stepnumber1The stepping interval between values.
disabledbooleanfalseWhen true, prevents user interaction and applies disabled styles.
orientation"horizontal" | "vertical""horizontal"The orientation of the slider.
classNamestring—Additional CSS classes to apply to the slider root.