Slider

"use client";import { Slider } from "@/registry/okibi/ui/slider";export default function SliderDemo() {  return <Slider defaultValue={[40]} className="w-64 max-w-full" />;}

Installation

npm install @radix-ui/react-slider

Usage

import { Slider } from "@/components/ui/slider"

<Slider defaultValue={[50]} max={100} step={1} />

Examples

Range

Pass two values in defaultValue to render two thumbs and select a range between them.

"use client";import { Slider } from "@/registry/okibi/ui/slider";export default function SliderRangeDemo() {  return <Slider defaultValue={[25, 75]} max={100} step={1} className="w-64" />;}

Disabled

disabled locks the thumb and dims the track.

"use client";import { Slider } from "@/registry/okibi/ui/slider";export default function SliderDisabledDemo() {  return <Slider defaultValue={[40]} max={100} disabled className="w-64" />;}

Vertical

Set orientation="vertical" inside a fixed-height track; give the thumb an aria-label.

"use client";import { Slider } from "@/registry/okibi/ui/slider";export default function SliderVerticalDemo() {  return (    <div className="flex h-48 items-center justify-center">      <Slider        orientation="vertical"        defaultValue={[60]}        aria-label="Volume"        className="h-full"      />    </div>  );}

Accessibility

• Built on Radix Slider.Root, so each thumb is a role='slider' with aria-valuemin / max / now; arrow keys step, Home / End jump to bounds.
• Thumbs carry no visible text — pass aria-label (or aria-labelledby); a two-thumb range with no label defaults to 'Minimum' / 'Maximum'.
• aria-label / aria-labelledby accept a string (labels every thumb) or an array (labels each thumb positionally).
• aria-invalid on the root propagates via group/slider to the track, range, and thumb destructive styling.
• Focus shows the 2px signal ring on the thumb (focus-visible:ring-2 ring-ring ring-offset-2).
• Supports orientation='vertical'; disabled is disabled:opacity-60, and drag/transition use the fast token (no spring).

Guidelines

Do

• Give every thumb an aria-label, and distinct labels for the two thumbs of a range.
• Pass value/defaultValue as an array — [50] for single, [20, 80] for a range.
• Set min, max, and step so keyboard stepping lands on meaningful values.

Don't

• Don't render a bare Slider and expect a single thumb — supply defaultValue explicitly.
• Don't use a slider where a precise number matters more than the gesture — pair it with an input or use a field.
• Don't omit thumb labels on a range; the screen reader would announce only the number.