Feature Flag Enabled Success Block for React

Nothing was toggled. The two audiences (12,400 users in Production, 380 in Staging), the starting rollouts (Production at 25%, Staging at 100%) and the people and dates are typed constants at the top of the file, and the dial only redraws the page. To wire it, read the flag from your flags API into ENVS and START, send the new stop from the slider's change handler (the polite status already waits until the dial rests, so you can send on the same beat), and put the error in the status line if the request fails. Roll back is a local move to 0% today: make it call your own rollback endpoint.

The slider's value is the stop's place, not a percentage: six steps that carry a ruler of seven labels spaced evenly, so 1% and 5% are not squeezed together. The arrow keys move one stop, Home and End go to 0% and 100%, and its value text is the stop's own words ("25%"). The sentence under the dial changes at once; the polite status line says the new reach about 600 milliseconds after the dial rests, so an arrow key held down does not read out every step.

Each environment keeps its own rollout and has its own audience. Switching from Production to Staging moves the dial to Staging's stop, redraws the figures and the sentence from Staging's 380 users, and says so in the status line; switching back finds Production where you left it. The group always has one pressed item.

It puts the open environment on 0%, draws the dial there and says "Production rolled back to 0%." in the status line. At 0% the button stays in place and keeps its focus, looks quiet, and answers a press with "Already at 0%. Nothing to roll back." instead of disappearing. Nothing is sent to a server in this demo.

They are worked out from the environment's typed audience and the stop's share, rounded to a whole user, so 25% of 12,400 is 3,100. The text says "about" because real flag services assign users by hashing, which lands near the share but rarely on it. The strip, the sentence and the status line all come from the same helper, so they never disagree.

View analytics is the one primary, a link to your own route. It is a Shine Button with render set to an a element and nativeButton={false}. On a phone the foot is pinned to the bottom of the screen while the panel scrolls.