Skip to content
Wave 3APG pattern (opens in a new tab)

Slider

Pick a number or a range by dragging or with the keyboard.

  • Exact values people know: use Input type="number".

Install

Terminal
pnpm dlx shadcn@latest add @acme/slider

Or import from the package: import { Slider } from '@acme/react'

Examples

Basic

Volume
40
Price range (USD)
20 – 80
slider-basic.tsx
'use client'

import { Slider } from '@/components/ui/slider'

export default function SliderBasic() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Slider label="Volume" defaultValue={40} />
      <Slider label="Price range (USD)" defaultValue={[20, 80]} step={5} />
    </div>
  )
}

Props

Slider props
PropTypeDefaultDescription
label (required)ReactNode—Visible label; names the slider.
value / defaultValuenumber | number[]—One value, or two for a range.
min / max / stepnumber0 / 100 / 1Range and increment.
showValuebooleantrueShow the current value.

Accessibility

Keyboard
KeyAction
Arrow keysChange by one step
Page Up / DownChange by a larger step
Home / EndMinimum / maximum
Role
slider
You provide
  • label (enforced by TypeScript).
Built in
  • Keyboard works without dragging (WCAG 2.5.7).
  • Track outline meets 3:1; the thumb hit area is at least 24px.
WCAG 2.2 criteria
1.4.11, 2.1.1, 2.5.7, 2.5.8, 4.1.2

Don’t

  • Use a slider for values that need precision.

Tokens

  • color.primary
  • color.muted
  • color.input
  • color.ring