Angle Slider

A circular dial for choosing an angle (0–360°), with a hidden input for forms.

<div
  data-controller="zag-angle-slider"
  data-part="root"
  data-zag-angle-slider-value-value="45"
  class="flex items-center gap-4"
>
  <!--
  Zag rotates the thumb by `--angle`; it's up to your CSS to make that
  rotation orbit the dial. Park the thumb at 12 o'clock and pull its
  transform origin down to the centre of the control (46px = half the
  96px control, minus its 2px border).
  -->
  <div
    data-part="control"
    class="border-border bg-popover relative h-24 w-24 rounded-full border-2"
  >
    <div
      data-part="thumb"
      class="border-background bg-primary absolute left-1/2 top-0 -ml-2 h-4 w-4 origin-[50%_46px] rounded-full border-2 shadow"
    ></div>
  </div>
  <span data-part="value-text" class="text-sm font-medium tabular-nums"></span>
  <input data-part="hidden-input" class="sr-only" />
</div>

Zag rotates the thumb by --angle and leaves the geometry to your CSS: park the thumb at 12 o'clock and set its transform-origin to the centre of the control (above, half of a 96px control less its 2px border), or the knob spins in place instead of orbiting the dial.

value-text is filled in for you with the angle ("45deg").

Parts

root, label, control, thumb, value-text, hidden-input, marker-group, marker.

Values

Attribute	Type	Default	Description
data-zag-angle-slider-value-value	Number	0	Initial angle (degrees).
data-zag-angle-slider-step-value	Number	1	Step increment.
data-zag-angle-slider-name-value	String	""	name for form submission.
data-zag-angle-slider-disabled-value	Boolean	false	Disable the dial.
data-zag-angle-slider-read-only-value	Boolean	false	Read-only.
data-zag-angle-slider-invalid-value	Boolean	false	Mark invalid.

Events

Emits zag-angle-slider:change — detail is { value }.

Programmatic control

value (getter), setValue(degrees).