Build a knob
A volume knob: a ring of ticks, a band that shows the level, a body with a dot that turns, and the number under it. On the way you meet every piece of Orbit. Each step below is live: open its code and change it.
1. Make a universe
Everything starts with a .bigbang. It is the space the knob lives in, and its box is the only size you set: the knob will be as big as this box. Here it is 260px wide and square by default. It is invisible; the dashed outline is only there so you can see it.
2. Give it a center
A .gravity-spot is the center of the system. Its gravity reaches the shorter side of the universe, and that reach is split into 12 lanes: the rings you will place things on. It is invisible too. The circle drawn here is its reach, --o-force.
3. Draw the orbits
Rings go straight inside the gravity spot. orbit-N sits N lanes from the center: orbit-6 halfway, orbit-12 at the edge. The knob needs three: orbit-11 for the ticks, orbit-10 for the band, and orbit-0, the center itself, for the body.
Rings are transparent. The dashed lines here come from a border in the example CSS.
orbit-11 outside, orbit-10 just inside it. orbit-0 is the center point, with no size of its own.4. Put things on them
Rings hold satellites carrying your content, ticks, chords, arcs and progress bands, and Orbit spreads them evenly around their ring. Here: 21 ticks on orbit-11, a progress band on orbit-10 and the number in the middle. The ticks are the same element 21 times, so one line of JavaScript writes them.
Centered content goes in .orbit-0 > .satellite.at-center > .capsule. Every element on a ring is one lane thick, so the center satellite gets --o-size-ratio: 6 to make room for the number.
5. Shape it
Now the details. The ticks and the band use 270° of the circle starting at 225° (range-270 from-225), so the knob has a gap at the bottom, and fit-range puts the first and last tick on the two ends of the range. --o-size-ratio makes the ticks a little shorter and the band a little thinner than a lane, and shape="rounded" rounds the band's ends. The track behind the band is --o-back-fill.
The number moves into the gap: a satellite on orbit-11 with angle-180 sits straight down. The dashed guides are gone.
6. A system inside a satellite
A satellite is a universe too: put a .gravity-spot inside it and its rings are measured against the satellite. The body of the knob is a satellite 15 lanes wide on orbit-0. Its capsule paints the body, and the system inside it carries the dot on its own orbit-9, with the same range as the dial.
With one satellite on a partial range, the dot sits at the start, 225°. Turning that inner ring with rotate moves it along: 64% of 270° is about 173°.
7. Make it turn
The drawing is done; the rest is a few lines of JavaScript. One function sets the value: it changes value on the <o-progress>, turns the inner ring through a --turn custom property, lights the ticks up to the value and keeps aria-valuenow in sync. The pointer, the wheel and the arrow keys all call it.
The .bigbang is the control: role="slider", a name and tabindex="0", so it works with a keyboard and a screen reader. Orbit draws; the behavior is yours.
Change width on .knob and all of it scales together, ticks, band, body and dot. Every element has more options like these: the pages under Elements list them. The same knob is also a full-page demo, and <o-knob> in Orbit Kit is a ready-made one.