Company Size Onboarding Block for React

Edit STOPS. Each stop has an id, words (what the slider says), full and short ruler labels (the short one shows on a phone), figures (how many people the drawing fills, out of 24), the sentence and three starts, each with a name, a detail and whether it starts now. The slider's value is the stop's position in that list, so adding a stop only needs a longer list; keep the three rows per stop so the list never changes height.

The slider is named “Team size” and reads each stop in words (“51 to 200 people”), not a bare number. The drawing is hidden from it, because the readout, the sentence and the list carry the same facts; the sentence is the page's one polite status, so each move is announced once. The ruler labels are buttons for a pointer only (out of the tab order), since the slider already reaches every stop with the keys.

The thumb starts on a guess (11–50), which is not an answer. Until it moves, or a label is pressed, Continue says “Move the slider first.” in a line that is always reserved and puts focus on the slider. After that Continue saves.

Twenty-four person icons in a fixed grid, filled up to the stop's count and drawn as faint outlines after it, plus a plus that appears only at the last stop. It is always left to right, even on a right-to-left page, and hidden from assistive technology. Its size never changes, so the page does not move as you slide.

Everything: Continue says the size was saved in this demo and nothing leaves the page. In your app send the stop's id to your server where submit says so and set up what the response says. The “Now” and “Later” lines are typed preview text; derive them from what your product really enables for that size.

The ruler labels shorten (“201–1k”, “1k+”), the drawing shrinks to fit, and Continue pins to the foot of the screen. The list under the sentence scrolls with the page.