Angle Slider

Circular angle input (0–359°). Drag the knob or use arrow keys (Shift = 15°), Home/End.

Import

import { AngleSlider } from '@marbleui/ui'

Props

<AngleSlider>

Prop	Type	Default
onChange *required	`(deg: number) => void`	`—`
value *required	`number`	`—`
className	`string`	`—`
label	`string`	`'Angle'`
size	`number`	`112`
step	`number`	`1`

Usage notes

Circular input for a direction in degrees (0–359), such as a gradient angle or a rotation. For a linear range use Slider; for picking a hue use ColorWheel.

const [angle, setAngle] = useState(90)
<AngleSlider label="Gradient angle" value={angle} onChange={setAngle} step={5} />

Controlled only: value and onChange are required. 0° is at the top and values grow clockwise, the same convention as CSS linear-gradient angles.
Arrow keys move by step, Shift+arrow by 15°, Home goes to 0° and End to the largest step below 360° (355° with step={5}), and values wrap past 0°. Screen readers get a slider that announces “90 degrees”.
Pressing anywhere on the dial jumps the value there and dragging follows the pointer. size sets the diameter in pixels (default 112).
label (default “Angle”) is the visible text above the dial and the slider’s name. There’s no disabled state and no hidden input for form submission.

Example source · show

import { useState } from 'react'
import { AngleSlider } from './angle-slider'

function Default() { const [v, setV] = useState(135); return <AngleSlider value={v} onChange={setV} label="Rotation" /> }
function Gradient() {
  const [v, setV] = useState(90)
  return <div className="flex items-center gap-6"><AngleSlider value={v} onChange={setV} step={5} label="Gradient angle" /><div className="size-28 rounded-xl" style={{ background: `linear-gradient(${v}deg, var(--chart-1), var(--chart-6))` }} /></div>
}
export const styles = { Default, 'With preview': Gradient }

Source: packages/ui/src/angle-slider/angle-slider.tsx

Catalog