Slider

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

Powered by

Base UIShadcn UI

Installation

npx shadcn@latest add @redpanda/slider

pnpm dlx shadcn@latest add @redpanda/slider

yarn dlx shadcn@latest add @redpanda/slider

bunx shadcn@latest add @redpanda/slider

nubx shadcn@latest add @redpanda/slider

aube dlx shadcn@latest add @redpanda/slider

Range

Vertical orientation

Disabled

Live value label

Custom step increments

Formatted value

Drag bubble

Custom min, max, and step

When to use

Sliders allow users to select a value from a range. Use this decision tree:

Usage

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

<Slider defaultValue={[33]} max={100} step={1} />

Props

Keyboard interactions

Accessibility

• Each thumb exposes role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow. Always provide a programmatic label (<Label> + aria-labelledby, or aria-label) describing what the value represents.
• Pair the slider with a visible numeric value where precision matters — sliders alone are hard to read for screen-reader and low-vision users.
• onValueChange receives number[] (always an array, even for single-thumb sliders) — unwrap with value[0] when you only need a scalar.
• Range sliders enforce minValue[i] <= value[i] <= value[i+1] <= maxValue automatically; you don’t need to clamp in user land.

Credits

• We use Base UI for the slider component.
• We take our inspiration from Shadcn UI for the slider style.