Slider

Lets users select a value or range by dragging a handle along a track.

Drag to adjust the display brightness.

39
Installation
$Terminal
npx shadcn@latest add https://sdk-components.thesqd.com/r/slider.json
Usage
Import from the master file and compose. Pass a `variant` for the visual treatment.
TSImport
import { Slider, type SliderVariant } from "@/components/ui/slider";
TSExample
import { Slider } from "@/components/ui/slider";

export function Example() {
  return <Slider label="Opacity" defaultValue={20} unit="%" />;
}
Composition
Anatomy of the Slider primitive.
Slider                            (single component — pass everything as props)
├── variant="default | ticks"
├── label={<ReactNode>}           (text shown above the track / inside the ticks track)
├── caption={<ReactNode>}         (helper text below the track)
├── value | defaultValue          (number for single, number[] for range)
├── onValueChange={(v) => …}      (controlled handler)
├── min / max / step              (numeric bounds and increment)
├── unit="%" | "dB" | …           (suffix appended to the displayed value)
├── formatValue={(v) => …}        (full control over the rendered value)
├── showValue={boolean}           (toggle the live value, default true)
├── prefixIcon / suffixIcon       (icons rendered either side of the track, default variant)
├── ticks={number}                (number of evenly-spaced tick marks, ticks variant)
├── orientation="horizontal | vertical"
└── disabled                      (read-only + muted styling)
Default
Label above the track with a live value on the right. The canonical layout.
20%
Inline ticks
Compact 10-high bar with the label inside the track on the left and the value on the right. The thumb only appears on hover or while dragging.

Drag to adjust the display brightness.

39
Step
Set a `step` value and the slider snaps to that increment as the user drags.

Step in 10

20%
Range
Pass a 2-element array to `defaultValue`/`value` for a two-thumb range slider.
25mi – 75mi
Vertical orientation
Stack vertical sliders for an EQ-style control surface.
32Hz
125Hz
500Hz
2kHz
8kHz
Prefix and suffix icons
Bracket the track with iconography — volume, brightness, temperature, etc.
50
Description
Helper text rendered under the track.

Brightness of the image

20%
Controlled
Drive the slider from external state via `value` + `onValueChange`.

Current temperature: 31°

31°
Disabled
Read-only with muted styling.
20%
API Reference
Props exposed by the Slider component.
PropTypeDefaultDescription
variant"default" | "ticks""default"Visual treatment. `default` is the classic label-above + 1.5-high bar. `ticks` is the compact 10-high inline bar with label/value inside the track.
labelReactNode—Field label. Rendered above the track (default) or inside the track on the left (ticks).
captionReactNode—Helper text rendered below the track.
valuenumber | number[]—Controlled value. Pass an array of length 2 for a range slider.
defaultValuenumber | number[]—Uncontrolled initial value.
onValueChange(value: number | number[]) => void—Called as the user drags or keys the slider.
minnumber0Minimum value.
maxnumber100Maximum value.
stepnumber1Increment between selectable values.
unitstring—Suffix appended to the displayed value (e.g. `%`, `°`, `dB`).
formatValue(value: number | number[]) => ReactNode—Full control over the rendered value. Overrides `unit` when provided.
showValuebooleantrueToggle the live value display.
prefixIconReactNode—Icon rendered to the left of the track (default variant only).
suffixIconReactNode—Icon rendered to the right of the track (default variant only).
ticksnumber11Number of evenly-spaced tick marks (ticks variant).
orientation"horizontal" | "vertical""horizontal"Layout orientation.
disabledboolean—Disable interaction and dim the slider.
classNamestring—Override or extend the resolved variant classes.