Role-Based Seat Mix Pricing Calculator — Free HTML CSS JS Snippet

Flat per-seat pricing pretends every user costs the same to support — but an admin with billing access and a read-only viewer rarely cost (or should be priced) the same. This calculator prices each role independently: three role cards, each with its own rate and its own increment/decrement stepper, and a summary that recalculates the live team total and blended average from whatever mix a visitor builds.

No separately-tracked total — everything is re-derived

recalcTotals() never increments a running total variable when a stepper is clicked. Instead, every time it runs, it loops over all .rsm-role cards fresh, reads each one's data-rate attribute and its count element's data-count attribute, and sums both from scratch. This means the displayed total can never drift from what the steppers actually show — there is no intermediate state to get out of sync, only a pure recalculation from the DOM's current attribute values.

Rate and count live in the DOM as data attributes, not JavaScript variables

Each role's per-seat rate is set once as data-rate on the .rsm-role card itself, and each stepper's live count is tracked as data-count on its .rsm-count span — both read directly off the markup rather than mirrored into a separate JavaScript object. This keeps the HTML and the state honest: viewing the page source at any moment shows you exactly what the calculator currently thinks each role costs and how many seats are set, since there's nowhere else for that state to hide.

`adjustCount()` clamps before it ever reaches the total

Rather than letting a count go negative or unbounded, adjustCount() clamps the next value with Math.max(0, Math.min(999, current + delta)) before writing it back to the data-count attribute. A role can be reduced all the way to zero seats (fading the card via .rsm-role-empty) without breaking the total math — a zero-count role simply contributes rate * 0 = 0 to the sum, same as if it weren't there.

The blended average tells a different story than any single rate

avg = totalPrice / totalSeats is deliberately shown alongside the raw total, since a team weighted toward cheaper Viewer seats will show a low blended average even with a few expensive Admin seats mixed in — a number that a single flat per-seat rate could never communicate, and that helps a visitor sanity-check whether their planned mix is being priced reasonably.

Customizing it

Add a fourth role by copying an existing .rsm-role block with its own data-rate and a stepper starting count, and adding matching minus/plus click handlers in the roleCards.forEach loop — recalcTotals() already sums generically over however many .rsm-role elements exist, so no changes are needed there. Swap the flat per-seat rates for volume-discounted rates by making recalcTotals() apply a discount multiplier once a role's count crosses a threshold.