AngleSlider
Circular dial input for selecting an angle value between 0 and 360 degrees.
Examples
Basic
Circular dial for selecting an angle by clicking.
With value
Interactive dial. Click the circle to set a new angle.
With labels
Compass-style dial with N / E / S / W snap buttons.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { AngleSlider } from "@rokle/components";import { AngleSlider } from "@rokle/components";
export function Example() {
return <AngleSlider />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | Current angle in degrees. |
| onValueChange | (value: number) => void | - | Called when the angle changes. |
| disabled | boolean | false | Disable interaction. |