Slider

Install

pnpm dlx shadcn@latest add @vegastack/slider

Usage

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

<Slider defaultValue={40} aria-label="Volume" />;

Pass an array for a range (one thumb per value):

<Slider
  defaultValue={[20, 80]}
  thumbAriaLabels={["Minimum price", "Maximum price"]}
/>

Examples

Anatomy

Slider composes Base UI's Slider parts internally — you use the single Slider export and it renders the structure for you:

<Slider.Root>
  {/* the clickable hit area */}
  <Slider.Control>
    {/* the rail (surface-1 by default; per-variant) */}
    <Slider.Track>
      {/* the filled portion (primary by default; per-variant) */}
      <Slider.Indicator />
      {/* one draggable handle per value; each owns a hidden <input type="range"> */}
      <Slider.Thumb />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>

• Root — owns the value, min/max/step, and disabled state. Exposes data-slot="slider".
• Control — the interactive hit area; pressing it jumps the nearest thumb.
• Track — the rail spanning the full min→max range (surface-1 on the default variant; see Variants).
• Indicator — the filled portion from min (or the lower thumb) up to the value (primary on the default variant; see Variants).
• Thumb — the draggable handle. One is rendered per value, so a single number gets one thumb and an array gets a range. Each thumb wraps a hidden <input type="range"> for keyboard control and form submission.

Range

Provide an array to render a range. The component renders one thumb per entry and keeps the thumbs from crossing.

Steps

Set min, max, and step to snap the value to a coarser scale — here, multiples of 50 between 0 and 1000.

Controlled

Pass value + onValueChange to drive the slider from your own state (mirror it back as text, sync it to a query param, etc.).

Thumb labels

A range needs a distinct accessible name per thumb. Pass a static thumbAriaLabels array (see Range), or compute names dynamically with getThumbAriaLabel — a callback that receives the thumb's index and current value and returns its name. getThumbAriaLabel takes precedence over the slider-level aria-label fallback, so it's the right tool when the name should reflect live state (for example announcing the value).

<Slider
  defaultValue={[20, 80]}
  getThumbAriaLabel={(index, value) =>
    `${index === 0 ? "Minimum" : "Maximum"} price, $${value ?? 0}`
  }
/>

Orientation

orientation="vertical" runs the rail bottom-to-top; every part keys off data-orientation, so the track, fill, thumb and tick marks all follow. Give the wrapper a height — a vertical rail fills its container the way a horizontal one fills its width. The media players' volume control is the canonical use.

Marks

marks draws decorative tick marks on the rail: true derives one per step, or pass an array to place them at exact values. They are aria-hidden — the thumb's native range input already carries min/max/step for assistive tech, so ticks would only duplicate it.

Value readout

showValue floats the formatted value above the active thumb, on drag and on keyboard focus only — a range gets one label per thumb. It is not a replacement for a visible label; it is the during-the-gesture feedback that tells you where you landed.

Variants

variant picks the rail, fill and thumb recipe, and thumb decides when the thumb is drawn.

thumb="always" (the default) draws the thumb at rest. thumb="hover" hides it at rest only where a pointer can hover and reveals it on hover, focus and drag; on a touch device it stays visible, because there is no hover to reveal it with. thumb="none" draws no thumb at all — for a rail where the fill itself is the position cue.

Disabled

disabled drops the thumb(s) from the tab order, blocks interaction, and dims the control. It applies to both single-value and range sliders — every thumb is dimmed and removed from the tab order.

A disabled range dims both thumbs:

Playground

Every Slider prop, auto-generated from its TypeScript types.

API Reference

Accessibility

• Each thumb renders a native <input type="range"> with role="slider" and aria-valuenow / aria-valuemin / aria-valuemax, so screen readers announce the current value and bounds.
• Fully keyboard operable — focus a thumb and use the arrow keys (see the table below). Range thumbs are independently focusable.
• Always give the slider an accessible name via aria-label (or wire it to a <label> / Field). A range needs a distinct name for each thumb; pass thumbAriaLabels (for example ['Minimum price', 'Maximum price']) or getThumbAriaLabel.
• :focus-visible shows a 2px ring (outline-ring) on the focused thumb — never outline: none.
• disabled removes the thumb(s) from the tab order and blocks all interaction.

Do / Don't