Range Slider

A dual-handle slider for selecting a numeric range.

Install

npx shadcn add @clearly/range-slider

Live Range Slider component — see usage below.

import { RangeSlider } from "@/components/ui/range-slider"

<RangeSlider />

Every Clearly component also accepts glass (subtle·medium·strong), specular and className.

Prop	Type	Default	Description
`value`	`[number, number]`	`—`	Low/high tuple (controlled).
`defaultValue`	`[number, number]`	`—`	Initial low/high tuple.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step increment.
`onValueChange`	`(value: [number, number]) => void`	`—`	Change callback.