caliper uidocs
DemoSign inGet Pro

Slider

Free

A native range input styled to match, with accessible value text.

Installs components/ui/slider.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/slider.json
14 seats · $84 per month

3 seats unused · 11 people active this month

When to use #

Use it for

  • One value in a known range where precision is secondary.
  • Retention, volume and opacity settings.

Skip it when

  • Two ends are adjustable; use a range slider.
  • Exact values matter; use a number field.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/slider.json

Adds the file to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { useState } from "react"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"

export function RetentionSlider() {
  const [seats, setSeats] = useState(14);
  return (
    <div className="grid w-full max-w-sm gap-2">
      <div className="flex items-baseline justify-between text-sm">
        <Label htmlFor="docs-seats">Seat limit</Label>
        <output htmlFor="docs-seats" className="tabular-nums text-muted-foreground">{seats} seats · ${seats * 6} per month</output>
      </div>
      <Slider id="docs-seats" min={1} max={50} step={1} value={seats} aria-valuetext={`${seats} seats`} onChange={(event) => setSeats(Number(event.currentTarget.value))} />
      <p className={seats < 11 ? "text-xs text-danger" : "text-xs text-muted-foreground"} role="status">
        {seats < 11 ? `Fewer than the 11 active people. ${11 - seats} will lose access.` : `${seats - 11} seats unused · 11 people active this month`}
      </p>
    </div>
  );
}

API reference #

Slider

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It is built on native elements, so roles and focus come from the browser.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.