Slider

A range slider input for selecting a value or range within a given minimum and maximum. Useful for price filters, ratings, and numeric inputs. Built on Radix UI Slider.

Preview

Default

050100

Price Filter

₹0₹1500₹5,000

Usage

tsx

import { Slider } from "zostel-ui";

{/* Single value */}
<Slider defaultValue={[50]} max={100} step={1} />

{/* Range */}
<Slider defaultValue={[500, 3000]} max={5000} step={100} />

{/* With steps */}
<Slider defaultValue={[3]} max={5} step={1} />

Props

Prop	Type	Default	Description
`value`	`number[]`	—	The controlled value(s) of the slider.
`defaultValue`	`number[]`	[0]	The default value(s) when uncontrolled.
`onValueChange`	`(value: number[]) => void`	—	Called when the value changes during drag.
`onValueCommit`	`(value: number[]) => void`	—	Called when the value changes on drag end.
`min`	`number`	0	The minimum allowed value.
`max`	`number`	100	The maximum allowed value.
`step`	`number`	1	The step increment between values.
`disabled`	`boolean`	false	Disables the slider.

value

Type: number[]

Default: —

The controlled value(s) of the slider.

defaultValue

Type: number[]

Default: [0]

The default value(s) when uncontrolled.

onValueChange

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

Default: —

Called when the value changes during drag.

onValueCommit

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

Default: —

Called when the value changes on drag end.

min

Type: number

Default: 0

The minimum allowed value.

max

Type: number

Default: 100

The maximum allowed value.

step

Type: number

Default: 1

The step increment between values.

disabled

Type: boolean

Default: false

Disables the slider.

Previous Switch Next Combobox