Rotary Knob
NewPro
A dial you drag up and down or turn with the wheel, with ticks, a glowing value arc, arrow keys and ARIA slider semantics.
Customize
21
270°
160px
#ff784f
When to use it
- Audio settings, such as volume, pan and reverb
- Tuning values in a game editor or a creative tool
- Compact numeric inputs in a dense control panel
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 348
Installation
Rotary Knob is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy rotary-knob.tsx into components/ui and run npm install motion.
Usage
import { RotaryKnob } from "@/components/ui/rotary-knob";
<RotaryKnob
label="Reverb"
name="reverb"
defaultValue={35}
formatValue={(v) => `${v}%`}
onChangeEnd={saveMix}
/>Props
22 properties| Property | Type | Default | Description |
|---|---|---|---|
| value | number | — | Controlled value. Leave it out to let the knob manage itself. |
| defaultValue | number | min | Starting value when uncontrolled. With bipolar, the middle of the range. |
| onChange | (value: number) => void | — | Called while dragging, scrolling or pressing keys. |
| onChangeEnd | (value: number) => void | — | Called when a drag, wheel gesture or key press ends. |
| min | number | 0 | Lowest value. |
| max | number | 100 | Highest value. |
| step | number | 1 | Values snap to multiples of this. |
| sensitivity | number | 240 | Pixels of vertical drag that cover the whole range. Holding Shift makes it five times finer. |
| arc | number | 270 | Sweep of the dial in degrees. |
| ticks | number | 21 | Marks around the dial. 0 hides them. |
| bipolar | boolean | false | Fills from the middle of the range, for pan or balance controls. |
| size | number | 140 | Diameter in pixels. |
| color | string | "#ff784f" | Color of the arc, the lit ticks and the pointer. |
| label | string | — | Visible label under the dial. Also names the slider. |
| formatValue | (value: number) => string | — | Formats the center value and the screen reader text. |
| showValue | boolean | true | Shows the value in the center of the dial. |
| resetValue | number | defaultValue | Value set by a double click. |
| disabled | boolean | false | Blocks interaction and leaves the field out of form data. |
| name | string | — | Form field name. Submits the number. |
| id | string | — | Base id for the label. |
| ref | Ref<HTMLDivElement> | — | Forwarded to the dial. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion