Milestone Discount Pricing Block for React

Edit ZONES at the top of the file: each zone has the monthly volume it from, a short name for its cell and its rate in dollars. MAX_LABELS is the track's right end and ROUNDING is how each zone rounds the count shown (to 100, 500, 1,000 and 5,000 labels), so the readout stays tidy. The number of zones sets the track: each takes an equal share, so it works with three or five zones if you change the cells' grid-cols-4 to match.

Each rate applies to the labels past its milestone, not to all of them: 22,000 labels cost 10,000 at 8¢ plus 12,000 at 5¢, which is $1,400. That is why crossing a milestone never makes the bill jump. billFor does the sum from ZONES, so if your pricing is different (every label at the rate of the milestone you reached, say), change that one function. The footnote under the section says which rule applies, so keep it in step with your terms.

On a linear track the first zones would be a few pixels wide and impossible to use. Each zone takes a quarter of the track and the thumb moves through that zone's range (0 to 10K, 10K to 50K, 50K to 250K, 250K to 1M), so the milestones sit at even steps and every rate is easy to land on. The slider's own value is a position from 0 to 400; labelsAt turns it into the label count and its rounding.

"Start shipping labels" is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Point it at your sign-up route; the slider is an estimator, so nothing it shows is sent anywhere. It's the only primary element: the slider's track and thumb are drawn in your foreground colour.

Yes. It has a visible label ("Labels a month") and reads its value as text, such as "22,000 labels a month, 5¢ a label", so a screen reader doesn't announce a position out of 400. The arrow keys, Home and End move it. The rate and the next milestone are announced once you stop dragging or release a key, in a polite live region, not at every step. The four zones are a list named "Rates by monthly volume", and the current one is marked with aria-current.

The track panel comes first and the result below it, so the slider, its readout and the call to action are all within the first two screens. The four zone cells shrink to fit 320 px, each with its rate large and its saving small, and the label count riding the thumb stays inside the panel at both ends of the track. Nothing scrolls sideways.