ROI Calculator Pricing Block for React

Edit the constants at the top of the file: SEAT_PRICE is the plan's price per member each month, HOURLY_COST what an hour of a team member's time is worth, and TEAM and HOURS set each slider's min, max and starting value. ASSUMPTIONS is the pair of facts shown in the header. The value of the time is members times hours a week times 52/12 weeks a month times the hourly value, rounded to a whole dollar before the rows are subtracted, so the rows always add up to the headline figure.

Yes. Each slider is named by its visible label and reads its value as words, "15 members" or "3 hours a week", rather than a bare number; the arrow keys, Home, End and Page Up and Down all work. A polite live region reads "Net savings $4,840 a month, 14.4 times what you pay" after a change, so the result is announced without moving focus.

The button is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Add the chosen team size to the query, for example /signup?plan=team&seats=15, so the trial starts with the right number of seats. On a phone the same link lives in the sticky bar, and the one in the result panel is hidden below md.

The sliders come first, then the result, and a sticky bar at the bottom of the section keeps the net savings and the button on screen while the sliders move. The bar sticks inside the section, so it leaves with it. Under md only one button is shown, so there are never two buttons to tab through.

Each block spends the primary colour on one control. Here that is the call to action, so the sliders' track fill and thumb border use the foreground colour. They stay readable in every theme and in dark mode.

They are what the formula gives for the numbers on the sliders and the two assumptions shown in the header, nothing more. The example product, Relaywork, is fictional, so replace the prices and the hourly value with your own, and keep the assumptions visible: a calculator the buyer can check is one they trust.