Slider

Description

Slider is built on the Radix Slider primitive. Drag the thumb along the track to set a value between min and max; the filled portion of the track shows the current value. It ships in two colors (variant primary / neutral) and three sizes (size md / sm / xs).

Reach for it when the relative position of a value reads faster than the exact number — volume, brightness, opacity, a value within a known range. When the user needs to type or precisely step an exact number, use Input (type="number") or InputStepper instead. For a binary on/off, use Switch.

Slider is tiered. The free tier is a single-thumb bar slider with variant and size. A developer seat unlocks the rail track and pill shape, the long thumb, value marks, a value tooltip, and range (two or more thumbs). The core API is identical, so upgrading is a prop swap, not a rewrite.

There is no built-in label — pair the slider with a Label (via htmlFor / id) or an aria-label so it announces its purpose.

Installation

pnpm dlx @create-ui/cli add slider

Usage

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

<Slider defaultValue={[50]} />

value and defaultValue are number arrays (a Radix convention), even for a single thumb: pass [50], not 50.

Examples

Slider is tiered: the free component ships the single-thumb bar slider with variant and size, and add slider with a developer seat swaps in the Pro build that adds the rail track, pill shape, long thumb, marks, tooltip, and range. The API is otherwise identical, so upgrading is a prop swap, not a rewrite.

Variants

variant sets the fill color of the track range: primary (the accent) or neutral (a high-contrast grey for a quieter control). The thumb stays white either way.

Sizes

size scales the track height and thumb together. Set it on the Slider itself.

Track

track sets the track style: bar (default) is a thin rule with the thumb floating above it; rail is a thick track whose thumb is an inset notch embedded in the fill. On a neutral rail the thumb switches to bg-static so it stays legible on the strong fill in both themes.

Shape

shape rounds the thumb (and, on a rail, the fill): rounded (default) or a fully round pill. On a bar track it swaps the square thumb for a circle; on a rail it rounds both the thumb and the fill ends.

Thumb

thumbType sets the thumb footprint: short (default) is square-ish, long is a wider grip that reads well on touch surfaces. Combined with track and shape there are eight thumb forms — the preview shows every one (bar and rail, each rounded and pill, each short and long).

Range

Pass two or more values for a range slider: the fill spans between the first and last thumb, and every thumb is independently draggable. The free tier fills from the start of the track, so range is a Pro behavior. Range works with every track, shape, thumb, and variant — the preview shows two- and three-thumb ranges across each.

Marks

Set marks to draw tick marks with labels under the track. Pass bare numbers (marks={[0, 25, 50, 75, 100]}) or { value, label } objects for custom labels, and pair with step so the thumb snaps to them.

Value tooltip

Set tooltip to "top" or "bottom" to show a value bubble above or below the thumb while hovering or dragging. formatTooltip={(value) => …} formats the displayed value (for example a % or currency mark).

Composition

Combine the pieces into a real control — a labelled Slider (a Label with an icon, an optional flag, and an info tooltip, plus a LabelCount), min / max Badges either side, value marks, and a value tooltip via formatTooltip.

Controlled

Pass value and onValueChange to drive the slider from your own state — useful when other UI needs to react to the value or when you display it. Omit them (use defaultValue) for a simple uncontrolled slider. onValueChange receives a number[].

Accessibility

Built on the Radix Slider primitive, so the thumb is role="slider" with aria-valuemin / aria-valuemax / aria-valuenow, and it is keyboard operable. In a range, each thumb is its own role="slider" and is keyboard operable independently.

ARIA notes:

• There is no built-in label. Add a Label (htmlFor + id on the slider) or an aria-label so the thumb announces what it controls.
• value reflects to aria-valuenow; provide aria-valuetext (Radix passthrough) when the raw number isn't self-explanatory (e.g. a currency or percentage).
• The value tooltip and marks are decorative (aria-hidden) — the value is already announced through aria-valuenow / aria-valuetext, so they add no screen-reader noise.

Styling

Tailwind override: pass className to merge Tailwind classes with the component's CVA classes (via cn()). It lands on the slider root, so width utilities work there.

<Slider defaultValue={[50]} className="w-full max-w-xs" />

Data slots and attributes: the component sets these for CSS targeting.

• data-slot="slider" on the root, data-slot="slider-track" on the track, data-slot="slider-range" on the filled range, data-slot="slider-thumb" on each thumb.
• data-variant="<variant>" and data-size="<size>" on the root. On Pro also data-shape, data-track, data-thumb-type, and data-dragging (while a thumb is held).
• Pro adds data-slot="slider-thumb-visual" on the visible thumb, data-slot="slider-tooltip" on the value bubble, and data-slot="slider-marks" on the marks layer.
• Radix sets data-disabled and data-orientation on the relevant elements.

Related Components

• Input: use this (with type="number") when the user needs to type or read an exact value rather than drag.
• InputStepper: use this to nudge a number up/down in fixed steps with explicit +/- controls.
• Switch: use this for a binary on/off rather than a value along a range.

API Reference

Slider

Wraps Radix Slider.Root, so its props (min, max, step, disabled, orientation, aria-*, …) are accepted.

Props