Vertical SliderFree

A vertical range input with configurable value labels, thumb shapes, colors, and height.

Add to your project

Checking access...

Claude*

Codex*

Lovable

Base44

Figma Make

Replit*

Cursor*

* Compatible with most projects that use the default React/Next.js framework.

React

Tailwind CSS

Prop	Type	Description
`value`	`number`	Controlled slider value.
`defaultValue`	`number`	Initial value when uncontrolled. Default: 650.
`onValueChange`	`(value: number) => void`	Called when the value changes.
`min`	`number`	Lowest allowed value. Default: 0.
`max`	`number`	Highest allowed value. Default: 1500.
`step`	`number`	Increment between values. Default: 1.
`height`	`number`	Track height in pixels. Default: 160.
`showValue`	`boolean`	Keeps the value label visible. Default: false.
`thumbShape`	`round \| pill \| square`	Thumb shape. Default: round.
`trackColor`	`string`	Unfilled track color.
`fillColor`	`string`	Filled track color.
`thumbColor`	`string`	Thumb color.
`formatValue`	`(value: number) => string`	Formats bounds and the value label.
`disabled`	`boolean`	Disables the slider.
`className`	`string`	Classes merged onto the outer wrapper.

Labeled React number input with an optional unit, stacked controls, bounds, and empty values.

Accessible React search bar with highlighted results, keyboard navigation, and polished loading and empty states.

A six-digit PIN input with paste support and keyboard navigation for verification codes.

A premium search input with a focused state and an icon that becomes a submit action as you type.

A minimalist input spinner for choosing quantities with buttons, typing, or arrow keys.