Forms Slider

Slider

Slide to a number: nights, a budget, a distance (Radix Slider).

Preview

Nights

13 nights14

Budget per night

₹0₹800 to ₹2,500₹5,000

Usage

tsx

import { Slider } from "zostel-ui";

const [nights, setNights] = useState([3]);

<Slider value={nights} onValueChange={setNights} min={1} max={14} step={1} aria-label="Nights" />

{/* a range: two values, two thumbs, heard as "Budget per night minimum" and "… maximum" */}
<h3 id="budget">Budget per night</h3>
<Slider value={budget} onValueChange={setBudget} min={0} max={5000} step={100} aria-labelledby="budget" />

Props

Prop	Type	Default	Description
`value / defaultValue`	`number[]`	—	One number per thumb.
`onValueChange`	`(value: number[]) => void`	—	Called while sliding.
`min`	`number`	`0`	Lowest value.
`max`	`number`	`100`	Highest value.
`step`	`number`	`1`	Step size.
`disabled`	`boolean`	`false`	Greys it out.
`aria-label · aria-labelledby`	`string`	—	Its name, required (a slider can’t take a <Label htmlFor>). It goes on each thumb, where a screen reader lands; a range’s thumbs add which end they are (“Nights minimum”, “Nights maximum”). In development, a thumb with no name warns in the console.
`thumbLabels`	`[string, string]`	—	A range (two values, two thumbs): each thumb’s own name, e.g. ["Fewest nights", "Most nights"], instead of the slider’s name with minimum and maximum.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

value / defaultValue

Type: number[]

Default: —

One number per thumb.

onValueChange

Type: (value: number[]) => void

Default: —

Called while sliding.

min

Type: number

Default: 0

Lowest value.

max

Type: number

Default: 100

Highest value.

step

Type: number

Default: 1

Step size.

disabled

Type: boolean

Default: false

Greys it out.

aria-label · aria-labelledby

Type: string

Default: —

Its name, required (a slider can’t take a <Label htmlFor>). It goes on each thumb, where a screen reader lands; a range’s thumbs add which end they are (“Nights minimum”, “Nights maximum”). In development, a thumb with no name warns in the console.

thumbLabels

Type: [string, string]

Default: —

A range (two values, two thumbs): each thumb’s own name, e.g. ["Fewest nights", "Most nights"], instead of the slider’s name with minimum and maximum.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).