Slider

An input where the user selects a value from within a given range. Built on Base UI's slider primitive.

Last updated August 17, 2026

CreditsModifiedPublished

Copied from shadcn/ui and Base UI.

Replaced the translucent bg-muted track fill with bg-primary/20 so the track stays visibly opaque against the page background instead of the near-invisible ~4% overlay bg-muted renders as on its own.
Wrapped the slider in Base UI's own DirectionProvider, fed from the ambient computed dir, for RTL — Base UI's Slider resolves drag and keyboard direction through its own DirectionContext (default ltr), not the DOM dir attribute, so it otherwise drags and responds to arrow keys backwards under an RTL page.
Normalized onValueChange's argument shape for single-thumb array-controlled sliders — Base UI's pointer-drag path reports a bare number instead of number[] in that case (a different internal code path than keyboard input, which gets it right), silently breaking consumers that assume value[0] stays defined while dragging.

Overview

$ npx shadcn@latest add https://ui.persian-labs.ir/r/slider.json

import { Slider } from "@/components/ui/slider"
 
export function Example() {
  return <Slider defaultValue={[33]} max={100} step={1} />
}

Pass an array with two values to render a range slider with a start and end thumb.

Pass an array with more than two values to render additional thumbs.

Set orientation="vertical" and give the slider an explicit height.

Pass value and onValueChange to control the slider's value.

Prop	Type	Default	Description
value	number \| number[]	-	The controlled value of the slider. Use with onValueChange for a controlled slider.
defaultValue	number \| number[]	-	The uncontrolled value when the slider is initially rendered.
onValueChange	(value: number \| number[], eventDetails) => void	-	Called when the value changes, while the thumb is dragged.
onValueCommitted	(value: number \| number[], eventDetails) => void	-	Called when the value changes at the end of an interaction.
min	number	0	The minimum allowed value.
max	number	100	The maximum allowed value.
step	number	1	The granularity the slider can step through values.
minStepsBetweenValues	number	0	The minimum steps between values, for range/multi-thumb sliders.
orientation	"horizontal" \| "vertical"	"horizontal"	The component orientation.
disabled	boolean	false	Whether the slider should ignore user interaction.