Slider

PreviousNext

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

Component slider-basic not found in registry.

Installation

pnpm add react-aria-components

Usage

import { Root, Thumb } from "@/components/ui/slider"
 
;<Root defaultValue={[50]} max={100} step={1} className="w-full" />

Examples

Basic Slider

Component slider-basic not found in registry.

Range Slider

Component slider-range not found in registry.

<Root defaultValue={[20, 80]} max={100} step={1} className="w-full" />

Disabled State

Component slider-disabled not found in registry.

<Root defaultValue={[30]} max={100} step={1} disabled className="w-full" />

Props

Prop

Type

Default

value
number[]
-
defaultValue
number[]
-
max
number
100
min
number
0
step
number
1
disabled
boolean
false
className
string
-