Range slider

Free

A two-handle slider for choosing a range of values.

Installs components/ui/range-slider.tsxDepends on none beyond ReactMotion none in component source

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

Budget

20 – 70

$20k to $70k

When to use #

Use it for

Budgets, price filters and date spans where both ends are adjustable.
Keyboard users need fine control with arrow keys.

Skip it when

One value only; use a slider.
Exact values matter; pair it with number fields.

Installation #

terminal

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

Adds its 2 files 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 { RangeSlider } from "@/components/ui/range-slider"

export function BudgetRange() {
  const [span, setSpan] = useState<[number, number]>([20, 70]);
  return (
    <div className="grid w-full max-w-sm gap-2">
      <RangeSlider label="Budget" min={0} max={100} step={10} value={span} onValueChange={setSpan} />
      <p className="text-sm text-muted-foreground">${span[0]}k to ${span[1]}k</p>
    </div>
  );
}

API reference #

RangeSlider

component

PropTypeDefaultDescription

label *string—

minnumber0

maxnumber100

stepnumber1

valuereadonly [number, number]—

defaultValuereadonly [number, number]—

onValueChange((value: [number, number]) => void)—

namestring—

format((value: number) => string)StringHow values are written in the readout, e.g. as money.

classNamestring—

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.