Circular progress with handle

A circular slider: a progress ring and a handle on the same lane, so the handle always sits where the fill ends.

How it's built

The <o-progress> and the handle are on two rings of the same lane, orbit-10, so they line up at any size.
The band is 1.2 lanes thick and the handle 2 lanes wide, set with --o-size-ratio on each ring, so the handle stands out past the edges.
A satellite alone on a ring sits at the top. Turning its ring with rotate moves it smoothly to any angle: value × 3.6deg, the same angle where the fill ends.
The universe is the role="slider": focusable, with arrow keys, Page Up/Down, Home and End, and pointer capture for dragging.