Input Arc Bar

ProNew

A semicircular range input: drag round the arc or use the keyboard to set a value.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/input-arc-bar

Prop	Type	Default	Description
`label`	`string`	`-`	Accessible name of the input.
`min`	`number`	`0`	Smallest value.
`max`	`number`	`100`	Largest value.
`step`	`number`	`1`	Step.
`value`	`number`	`-`	Controlled value.
`defaultValue`	`number`	`min`	Initial value.
`onValueChange`	`(value: number) => void`	`-`	Called when the value changes.
`formatValue`	`(value: number) => string`	`String(value)`	Text shown in the middle.
`name`	`string`	`-`	Form field name.
`disabled`	`boolean`	`false`	Disable the input.

The fill and thumb ease for 120ms after a change; nothing runs on its own.
With prefers-reduced-motion: reduce the easing is removed.
A real range input sits under the drawing, so screen readers get the value, range and name.
The focus ring shows on the arc thumb.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/input-arc-bar

Prop	Type	Default	Description
`label`	`string`	`-`	Accessible name of the input.
`min`	`number`	`0`	Smallest value.
`max`	`number`	`100`	Largest value.
`step`	`number`	`1`	Step.
`value`	`number`	`-`	Controlled value.
`defaultValue`	`number`	`min`	Initial value.
`onValueChange`	`(value: number) => void`	`-`	Called when the value changes.
`formatValue`	`(value: number) => string`	`String(value)`	Text shown in the middle.
`name`	`string`	`-`	Form field name.
`disabled`	`boolean`	`false`	Disable the input.

The fill and thumb ease for 120ms after a change; nothing runs on its own.
With prefers-reduced-motion: reduce the easing is removed.
A real range input sits under the drawing, so screen readers get the value, range and name.
The focus ring shows on the arc thumb.