Knob

ProNew

A rotary value control on a 270-degree arc, dragged vertically, with arrow, page and wheel control, for audio and dense tool panels.

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/knob

Prop	Type	Default	Description
`value / defaultValue`	`number`	`0`	Controlled or initial value.
`onValueChange`	`(value: number) => void`	`-`	Called on change.
`min / max / step`	`number`	`0 / 100 / 1`	Range.
`size`	`number`	`96`	Diameter in px.
`label`	`string`	`-`	Accessible name.
`format`	`(value: number) => string`	`String`	Display and aria-valuetext.
`disabled`	`boolean`	`false`	Disable.

Role: slider.

role=slider with aria-valuemin, aria-valuemax, aria-valuenow and a formatted aria-valuetext.
Dragging up or right raises the value, down or left lowers it, and uses pointer capture.
Disabled sets aria-disabled and ignores all input.

Guide and examples


pnpm dlx shadcn@latest add @tealmac/knob

Prop	Type	Default	Description
`value / defaultValue`	`number`	`0`	Controlled or initial value.
`onValueChange`	`(value: number) => void`	`-`	Called on change.
`min / max / step`	`number`	`0 / 100 / 1`	Range.
`size`	`number`	`96`	Diameter in px.
`label`	`string`	`-`	Accessible name.
`format`	`(value: number) => string`	`String`	Display and aria-valuetext.
`disabled`	`boolean`	`false`	Disable.

Role: slider.

role=slider with aria-valuemin, aria-valuemax, aria-valuenow and a formatted aria-valuetext.
Dragging up or right raises the value, down or left lowers it, and uses pointer capture.
Disabled sets aria-disabled and ignores all input.