Range
The Range component is a user interface element that allows users to easily set a minimum and maximum value (a range), using interactive sliders.
Installation
You can install this component via the shadcn CLI.
npx shadcn@latest add https://jakeisonline.com/playground/registry/range.json
Usage
import {
Range,
RangeBar,
RangeFill,
RangeGrabber,
} from "@/components/ui/range"
<Range
minRange={0}
maxRange={100}
initialLowValue={20}
initialHighValue={80}
>
<RangeBar>
<RangeGrabber type={"low"} aria-label="Low Value" />
<RangeFill className="h-1 grow bg-blue-600" />
<RangeGrabber type={"high"} aria-label="High Value" />
</RangeBar>
</Range>
Accessibility
Adheres to the Slider (multi-thumb) WAI-ARIA design pattern .
Each <RangeGrabber> should have an aria-label prop, describing what that grabber represents. For example, if you have a price range, you might have a low price grabber with an aria-label="Low price" and a high price grabber with an aria-label="High price".
Component Reference
Range
Used to wrap a single range field. Also provides context for all child components.
| Prop | Type | Description |
|---|---|---|
minRange | number | The minumum number a user can select. Required. |
maxRange | number | The maximum number a user can select. Required. |
initialLowValue | number | The initial low value of the range. Uses minRange if not provided. |
initialHighValue | number | The initial high value of the range. Uses maxRange if not provided. |
RangeGrabber
An interactive element that represents a single value in a range. It is used to allow users to select a value within a range.
| Prop | Type | Description |
|---|---|---|
type | "low" | "high" | The type of the grabber. Must be either "low" or "high". Required. |
aria-label | string | Label for screen readers. See accessibility . Required. |
RangeFill
A component that fills the space between two range grabbers. It is used to indicate the size of the given range. Used for aestetics only (you might wish to customise the fill color, for example).