Docs › Components › Slider

Shadcn Slider

The shadcn/ui Slider lets users pick a value within a range by dragging a thumb, styled with Tailwind CSS v4. Built on Base UI, it supports keyboard control and single or multi-handle ranges. Sliders power price filters, volume, and quantity controls across ShadcnStore blocks.

Key features

• Single value or multi-handle range.
• min, max, and step control the allowed values.
• Full keyboard control (arrow keys, Home, End).
• Controlled or uncontrolled via value / defaultValue.
• Built on Base UI with single-value or multi-handle ranges.

Installation

npx shadcn@latest add slider

Usage

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

export function Example() {
  return <Slider defaultValue={[50]} max={100} step={1} />
}

Range with two handles

<Slider defaultValue={[25, 75]} max={100} step={1} />

Controlled value

const [value, setValue] = useState([50])

<Slider value={value} onValueChange={(v) => setValue(v as number[])} max={100} />

Props

Prop	Type	Default	Description
value	number | number[]	—	Controlled value; pass a one-element array for a single thumb, or two+ for a range.
defaultValue	number | number[]	—	Uncontrolled initial value; pass a one-element array for a single thumb.
min / max	number	0 / 100	Range bounds.
step	number	1	Increment between values.
onValueChange	(value) => void	—	Fires while dragging.

Accessibility

• Each thumb is keyboard-operable with arrow keys, Home, and End; do not remove focus styles.
• Give the slider an accessible name with a Label or aria-label, and show the current value nearby.
• For a two-handle range, ensure both thumbs have clear names such as "minimum" and "maximum".

When to use the Slider

Use a Slider for choosing an approximate value in a continuous range where dragging feels natural: volume, brightness, a price filter, or a quantity. For a precise number, an Input with type="number" is clearer. For completion status, use a Progress bar.

Used in these blocks

• Category filters: price-range filter.
• Apps: settings and level controls.
• Widgets: threshold controls.

Related components

A Slider sits in a Form or filter panel with a Label. For a precise value use an Input; for task completion use a Progress bar.

FAQ

What is the shadcn slider used for?

The Slider lets users pick a value within a range by dragging a thumb, useful for volume, price filters, and quantities.

How do I make a range slider with two handles?

Pass an array of two numbers to defaultValue or value; the Slider renders a thumb per value.

How do I set the step?

Set the step prop to control the increment between allowed values, along with min and max.

How do I show the current slider value?

Read value from state (or onValueChange) and render it next to the slider or in a Label.