Skip to content

Slider

A draggable control for selecting a numeric value or range within fixed bounds.

Slider
Stagger
80 ms

Installation

pnpm dlx shadcn@latest add @sortui/slider

Usage

import {
  Slider,
  SliderLabel,
  SliderValue,
} from "@/components/ui/slider"

Examples

Range

Delay window
40 – 120 ms

Inline

50%

Autoscaling range

Configure the autoscaling range0.25 – 1 CU
Scale from0.25 CU (~1 GB RAM)
Scale up to1 CU (~4 GB RAM)

Color picker

Color#00FF26 70%
HEX
#00FF26
RGB
rgb(0 255 38 / 70%)
OKLCH
oklch(87% 0.29 143 / 70%)

Effort Slider

EffortHigh

Scrubber

Vertical

Disabled

Ship your next project this week

Get the full Figma kit, the code of 180+ sections and every future update for one payment.

Get Pro Access