Choose a single value, a range, or several points by moving thumbs along a track.
tsx
import { Slider } from "@/components/ui/slider"export function Example() { return <Slider defaultValue={[33]} />}Installation
npx @arctis-sh/@arctis-sh/ui@latest add sliderUsage
import { Slider } from "@/components/ui/slider"<Slider defaultValue={[33]} />Range
Pass two values to create lower and upper thumbs.
tsx
import { Slider } from "@/components/ui/slider"export function Example() { return <Slider defaultValue={[25, 75]} />}Multiple thumbs
Pass more than two values when several points belong on the same track.
tsx
import { Slider } from "@/components/ui/slider"export function Example() { return <Slider defaultValue={[10, 40, 80]} />}Vertical
Set orientation="vertical" for a tall control.
tsx
import { Slider } from "@/components/ui/slider"export function Example() { return ( <div className="flex h-48 items-center gap-8"> <Slider defaultValue={[40]} orientation="vertical" /> <Slider defaultValue={[20, 70]} orientation="vertical" /> </div> )}Controlled
Keep the value in state when another part of the interface needs it. This example shows a temperature range with a live readout.
Temperature0.3, 0.7
tsx
"use client"import { useState } from "react"import { Slider } from "@/components/ui/slider"export function Example() { const [value, setValue] = useState([0.3, 0.7]) return ( <div className="flex w-full flex-col gap-3"> <div className="flex items-center justify-between text-sm tracking-wide"> <span className="font-medium">Temperature</span> <span className="text-muted-foreground tabular-nums"> {value[0].toFixed(1)}, {value[1].toFixed(1)} </span> </div> <Slider min={0} max={1} step={0.1} value={value} onValueChange={(next) => { if (Array.isArray(next)) setValue([...next]) }} /> </div> )}Tooltip
Pass formatTooltip to show a pill label while dragging. It prefers the top for horizontal sliders and the right for vertical ones, then flips if that side would clip.
tsx
import { Slider } from "@/components/ui/slider"export function Example() { return ( <div className="flex w-full items-end gap-10"> <Slider className="flex-1" defaultValue={[48]} formatTooltip={(value) => `${value}%`} /> <Slider className="h-40" defaultValue={[40]} orientation="vertical" formatTooltip={(value) => `${value}%`} /> </div> )}Disabled
Set disabled to lock the control.
tsx
import { Slider } from "@/components/ui/slider"export function Example() { return <Slider defaultValue={[50]} disabled />}API Reference
Slider
| Prop | Type | Default |
|---|---|---|
| defaultValue | number | number[] | — |
| value | number | number[] | — |
| onValueChange | (value: number | number[]) => void | — |
| onValueCommitted | (value: number | number[]) => void | — |
| formatTooltip | (value: number, index: number) => ReactNode | — |
| min | number | 0 |
| max | number | 100 |
| step | number | 1 |
| orientation | "horizontal" | "vertical" | "horizontal" |
| disabled | boolean | false |
| name | string | — |
| className | string | — |
Also accepts other root attributes such as form, minStepsBetweenValues, and largeStep.
<Slider defaultValue={[50]} max={100} step={1} />