Slider

PreviousNext

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

Component slider-basic not found in registry.

Installation

pnpm add @radix-ui/react-slider

Usage

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

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">
  <Thumb />
  <Thumb />
</Root>

Disabled State

Component slider-disabled not found in registry.

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

Props

Prop

Type

Default

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