shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/slider.jsonnpx shadcn@latest add https://kit.dev/r/aria/slider.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/slider.jsonyarn shadcn@latest add https://kit.dev/r/aria/slider.jsonThis component depends on Field. Install it first if you haven't already.
Install the following dependencies:
bun add react-aria-componentsnpm install react-aria-componentspnpm add react-aria-componentsyarn add react-aria-componentsCopy and paste the following code into your project.
"use client";
import type React from "react";
import {
SliderFill,
Slider as SliderPrimitive,
type SliderProps as SliderPrimitiveProps,
SliderThumb,
SliderTrack,
} from "react-aria-components";
import { cn } from "@/lib/utils";
import { FieldLabel } from "@/components/ui/field";
type SliderValueType = number | number[];
type SliderProps<T extends SliderValueType = SliderValueType> = Omit<
SliderPrimitiveProps<T>,
"className"Update the import paths to match your project setup.
Anatomy
Slider
├── SliderLabel
├── SliderThumb
├── SliderValue
├── SliderTrack
├── SliderRange
├── SliderControl
├── SliderMarkerGroup
├── SliderMarker
└── SliderDraggingIndicatorUsage
import { Slider } from "@/components/ui/slider";<Slider
className="mx-auto w-full max-w-xs"
defaultValue={[75]}
max={100}
step={1}
/>Accessibility
| Key | Description |
|---|---|
ArrowUp | Increase the value when orientation is "vertical". |
ArrowDown | Decrease the value when orientation is "vertical". |
ArrowLeft | Decrease the value when orientation is "horizontal". |
ArrowRight | Increase the value when orientation is "horizontal". |
PageUp | Increase the value. |
PageDown | Decrease the value. |
Home | Go to the start. |
End | Go to the end. |
Demos
Range
Use an array with two values for a range slider.
Multiple
Use an array with multiple values for multiple thumbs.
Vertical
Use orientation="vertical" for a vertical slider.
Controlled
Controlled slider with a live value readout.
Disabled
Use the disabled prop to disable the slider.
Rtl
Right-to-left slider. See the RTL configuration guide for document direction.
API Reference
Slider
PropType
AttributeType
SliderLabel
PropType
AttributeType
SliderValue
PropType
AttributeType