Slider

Form

A customizable slider component for selecting numeric values within a range. Supports single and multiple handles, custom steps, and vertical orientation.

Installation

bash

1npx @dinachi/cli@latest add slider

Run the CLI command above to automatically install the component and its dependencies.

Examples

Default Slider

A basic slider for value selection

Volume

Slider with Value Display

Controlled slider showing current value

Brightness50%

Range Slider

Slider with two thumbs for selecting a range

Price Range$25 - $75

Step Slider

Slider with defined step increments

Quality50%

0%25%50%75%100%

Disabled Slider

Slider in disabled state

Volume (Locked)

API Reference

Prop	Type	Default	Description
`value`	`number[]`	—	The current value(s) of the slider
`defaultValue`	`number[]`	—	The default value(s) of the slider
`onValueChange`	`(value: number[]) => void`	—	Callback fired when the slider values change
`min`	`number`	`0`	The minimum value of the slider
`max`	`number`	`100`	The maximum value of the slider
`step`	`number`	`1`	The step increment for the slider
`disabled`	`boolean`	`false`	Whether the slider is disabled
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	The orientation of the slider