Slider with a volt fill, step ticks and a bar-shaped thumb that springs to each step and stretches while you drag.
sliderrangepricingseatsinputform
Installation
$npx shadcn@latest add @geturui/range-slider
Usage
usage.tsx
1import * as React from "react";
2import { RangeSlider } from "@/components/ui/range-slider";
3
4export function SeatPicker() {
5 const [seats, setSeats] = React.useState(5);
6 return (
7 <RangeSlider
8 label="Seats"
9 min={1}
10 max={20}
11 value={seats}
12 onValueChange={setSeats}
13 format={(v) => `${v} seats`}
14 />
15 );
16}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Lowest value. |
max | number | 100 | Highest value. |
step | number | 1 | Values snap to multiples of this from min. |
value | number | — | Current value when controlled. |
defaultValue | number | min | Initial value when uncontrolled. |
onValueChange | (value: number) => void | — | Called with each new snapped value. |
label | ReactNode | — | Label shown above the track with the current value. |
format | (value: number) => ReactNode | — | Formats the displayed value; string results are also used as aria-valuetext. |
ticks | boolean | true | Draw a dot per step (only when there are 30 steps or fewer). |
className | string | — | Classes for the wrapper. |
Accessibility
- The thumb is role="slider" with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext from format.
- Arrow keys step, Page Up/Down jump about a tenth of the range, Home and End go to the ends.
- Clicking or dragging the track moves focus to the thumb, so the keyboard picks up where the pointer left off.