LED knob
A knob with discrete steps: eleven LEDs, one per position, lit up to the current one, and a pointer that snaps between them.
How it's built
- Eleven satellites on
orbit-11withrange-290 from-215 fit-range: the first and last sit on the two ends of the sweep, the rest are spread evenly between them. - A lit LED is a class on its satellite.
:nth-child(n + 9)and:nth-child(11)turn the top steps amber and coral. - The knob is a satellite on
orbit-0with a.gravity-spotinside: its cap is a centered satellite of that inner system, and its pointer a.vectoronorbit-9. - The pointer's ring turns with
rotate, 29° per step, the same spacing as the LEDs. A springy easing makes each step snap.
Related
- Knob with progress bar: continuous values
- Dashed progress bar: steps without a knob
- Orbit Kit knob