Slider

InstallationCopy Anchor Link

{
  "registries": {
    "@rabtx": "http://localhost:3002/r/{name}.json"
  }
}

npx shadcn@latest add @rabtx/slider

npx shadcn@latest add http://localhost:3002/r/slider.json

UsageCopy Anchor Link

Installed from the registry, import from @/components/ui/slider; inside this monorepo, from @rabtx/ui/slider.

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

export function PriceFilter() {
  const [price, setPrice] = useState([200, 800]);
  return (
    <Slider aria-label="Price" value={price} onValueChange={setPrice} max={1000} step={10} />
  );
}

Values are arrays, as in shadcn: one number is a slider, two (or more) a range. Every thumb is an <input type="range">, so the browser provides the slider role, the value, minimum and maximum for screen readers, arrow keys, Page Up and Down, Home and End, and the form value. Name it with a Field or an aria-label.

Value bubbleCopy Anchor Link

showValue puts the value over the thumb while it is hovered, focused or dragged; "always" keeps it out. formatValue formats the bubble and the value read to screen readers (aria-valuetext). The bubble is decorative (aria-hidden): the input already announces the value.

MarksCopy Anchor Link

marks draws ticks under the track (never under the thumb): true for every step (up to 100), or a list of values, each with an optional label. Ticks inside the filled part take the fill color. The values also fill a <datalist> linked with the inputs' list attribute.

RulerCopy Anchor Link

variant="ruler" swaps the round thumb for a needle over a tick scale, with a large readout above. The scale draws a tick every step (or every few steps, so there are at most 100); labelled marks add taller ticks underneath.

VerticalCopy Anchor Link

orientation="vertical" stands the slider up with the native vertical writing mode, minimum at the bottom; Arrow Up raises it. Give it a height (12rem by default). Bubbles open to the side.

StatesCopy Anchor Link

Disabled is dimmed to 50%, skipped by Tab and ignores the pointer. Inside a Field the label names the slider, the hint describes it, and error turns the rail edge and the thumb --destructive and links the message.

Range and controlledCopy Anchor Link

Two values make a range: one input per thumb, overlaid on a shared track. Each thumb is clamped between its neighbours, minStepsBetweenThumbs apart, so they can meet but never cross. Pressing the bare track moves the nearest thumb there and follows the pointer. onValueChange fires on every move; onValueCommit fires when a drag or a key press ends (the native change event).

FormsCopy Anchor Link

A slider submits under its name; a range submits one entry per thumb, read with formData.getAll(name).

Right to leftCopy Anchor Link

The native range runs from the inline start, and the fill, bubbles and marks follow it.

APICopy Anchor Link

Slider takes everything a <div> takes (on the root), plus:

Outside React, the class names are exported from @rabtx/ui/slider/styles. The fill reads --_lo and --_hi (numbers from 0 to 1) from the root:

<div class="rx-slider rx-slider-md" data-orientation="horizontal" style="--_lo: 0; --_hi: 0.4">
  <div class="rx-slider-control">
    <div class="rx-slider-layer">
      <input type="range" class="rx-slider-input" value="40" aria-label="Volume" />
    </div>
  </div>
</div>

ThemingCopy Anchor Link

The Slider reads only the theme tokens.

How it worksCopy Anchor Link

JavaScript only keeps the values, clamps the thumbs and handles a press on a range's bare track. Thumbs cannot be anchors for CSS anchor positioning (they are pseudo-elements), which is why the bubble reads a variable instead.

Not built, because they need JavaScript animation: a bubble that leans with drag velocity, a ruler scale that scrolls under a fixed needle with momentum, bars that rise into a travelling crest, and a thumb that parts around inline labels. The thumb itself jumps with the native input rather than gliding on a spring, so the value under the pointer is always exact.

Browser supportCopy Anchor Link

• Everywhere: appearance: none on ranges, the WebKit and Firefox thumb and track pseudo-elements, color-mix(), nesting, :has(), mask-composite and linear() easings: Chrome 120+, Safari 17.2+ and Firefox 128+ (from compatibility data; tested in Chrome).
• Vertical: writing-mode on a range needs Chrome 124+, Safari 17.4+ or Firefox 120+.

AccessibilityCopy Anchor Link

• Every thumb is a native slider: role, value, minimum, maximum and orientation come from the input, and formatValue adds aria-valuetext.
• A range's thumbs are named by the label and their own name ("Price Minimum", "Price Maximum"), with aria-labelledby pointing at the Field label and the thumb.
• Arrow keys step, Page Up and Down move by a tenth, Home and End go to the ends; a range thumb stops at its neighbour.
• Focus shows a 2px --ring outline around the thumb. Value is shown by position and the fill, never motion alone; reduced motion only fades the bubble and data-motion="off" moves nothing.