Clamped Slider | VantaUI

Pro

Interact

Usage

Props

Value and state

Prop	Type	Description
`min`	`number`	Minimum value. Default: 15.
`max`	`number`	Maximum value. Default: 90.
`step`	`number`	Value increment. Default: 5.
`value`	`number`	Controlled value.
`defaultValue`	`number`	Initial value. Defaults to min.
`onValueChange`	`(value: number) => void`	Called when the value changes.
`disabled`	`boolean`	Disables input and submission.

Display and formatting

Prop	Type	Description
`prefix`	`string`	Text before each value.
`suffix`	`string`	Text after each value. Default: " min".
`animated`	`boolean`	Animates digits. Default: true.
`showMax`	`boolean`	Shows the maximum. Default: true.
`format`	`Intl.NumberFormatOptions`	Number formatting options.
`locales`	`Intl.LocalesArgument`	Number formatting locale.

Integration and accessibility

Prop	Type	Description
`name`	`string`	Form field name.
`className`	`string`	Additional Tailwind classes.
`id`	`string`	Slider element ID.
`aria-label`	`string`	Accessible name. Default: "Session length".
`aria-labelledby`	`string`	IDs of labeling elements.
`aria-describedby`	`string`	IDs of help text elements.
`tabIndex`	`number`	Keyboard tab order. Default: 0.