Angle Slider

FreeNew

A circular handle for choosing an angle from 0 to 359 degrees, with wrap-around, markers and snapping, for gradients, shadows and rotation.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

value / defaultValue0

step1

size128

label

markers

disabled


pnpm dlx shadcn@latest add @tealmac/angle-slider

import { AngleSlider } from "@/components/ui/angle-slider"

<AngleSlider label="Gradient angle" value={angle} onValueChange={setAngle} />

Prop	Type	Default	Description
`value / defaultValue`	`number`	`0`	Degrees, 0 at the top, clockwise.
`onValueChange`	`(degrees: number) => void`	`-`	Called on change.
`step`	`number`	`1`	Snap size.
`size`	`number`	`128`	Diameter.
`label`	`string`	`-`	Accessible name.
`markers`	`boolean`	`true`	Ticks at 0, 90, 180, 270.
`disabled`	`boolean`	`false`	Disable.

Role: slider.

Guide and examples


pnpm dlx shadcn@latest add @tealmac/angle-slider

import { AngleSlider } from "@/components/ui/angle-slider"

<AngleSlider label="Gradient angle" value={angle} onValueChange={setAngle} />

Prop	Type	Default	Description
`value / defaultValue`	`number`	`0`	Degrees, 0 at the top, clockwise.
`onValueChange`	`(degrees: number) => void`	`-`	Called on change.
`step`	`number`	`1`	Snap size.
`size`	`number`	`128`	Diameter.
`label`	`string`	`-`	Accessible name.
`markers`	`boolean`	`true`	Ticks at 0, 90, 180, 270.
`disabled`	`boolean`	`false`	Disable.

Role: slider.