webdevpuneet.com

Related Snippets

57 in Pricing category
38–43 of 57

Tiered Usage Pricing Breakdown

Annual Savings Badge

Pricing Tier Recommender Quiz

Pricing Add-On Selector

Seat-Based Pricing Calculator

Pricing Card Currency Switcher

Tiered Usage Pricing Breakdown — Free Stepped Cost Calculator (HTML/CSS/JS)

Tiered Usage Pricing Breakdown · Pricing · Plain HTML, CSS & JS · Live preview

CategoryPricing
TagsE-CommerceLanding PageCSS Grid

Copy & paste

Source Code

<div class="utb-card">
  <div class="utb-head">
    <h3>Estimate your usage cost</h3>
    <p>Pricing steps down as your usage grows</p>
  </div>

  <div class="utb-input-row">
    <label for="utbUnits">Units per month</label>
    <span class="utb-input-value" id="utbUnitsValue">10,000</span>
  </div>
  <input type="range" id="utbUnits" min="0" max="80000" step="500" value="10000" />

  <ul class="utb-tiers" id="utbTiers">
    <li class="utb-tier" data-from="0" data-to="1000" data-rate="0">
      <div class="utb-tier-info">
        <span class="utb-tier-range">Units 1 &ndash; 1,000</span>
        <span class="utb-tier-rate">Free</span>
      </div>
      <div class="utb-tier-bar"><div class="utb-tier-fill"></div></div>
      <b class="utb-tier-cost">$0.00</b>
    </li>
    <li class="utb-tier" data-from="1000" data-to="5000" data-rate="0.01">
      <div class="utb-tier-info">
        <span class="utb-tier-range">Units 1,001 &ndash; 5,000</span>
        <span class="utb-tier-rate">$0.01 / unit</span>
      </div>
      <div class="utb-tier-bar"><div class="utb-tier-fill"></div></div>
      <b class="utb-tier-cost">$0.00</b>
    </li>
    <li class="utb-tier" data-from="5000" data-to="50000" data-rate="0.008">
      <div class="utb-tier-info">
        <span class="utb-tier-range">Units 5,001 &ndash; 50,000</span>
        <span class="utb-tier-rate">$0.008 / unit</span>
      </div>
      <div class="utb-tier-bar"><div class="utb-tier-fill"></div></div>
      <b class="utb-tier-cost">$0.00</b>
    </li>
    <li class="utb-tier" data-from="50000" data-to="Infinity" data-rate="0.006">
      <div class="utb-tier-info">
        <span class="utb-tier-range">Units 50,001+</span>
        <span class="utb-tier-rate">$0.006 / unit</span>
      </div>
      <div class="utb-tier-bar"><div class="utb-tier-fill"></div></div>
      <b class="utb-tier-cost">$0.00</b>
    </li>
  </ul>

  <div class="utb-total">
    <span>Estimated monthly cost</span>
    <div class="utb-total-right">
      <b id="utbTotal">$0.00</b>
      <small id="utbBlended">$0.000 / unit blended</small>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

True tiered consumption
Each tier bills only the units that actually fall inside it.
Four-step pricing
A free tier plus two capped paid tiers plus an open-ended one.
Live blended rate
Total cost divided by total units, updating with the slider.
Per-tier fill bars
A visual gauge of how full each tier is relative to its size.
Open-ended final tier
Handles Infinity as an upper bound without special-casing display.
Verified example totals
10k, 50k, and 60k unit totals hand-checked against the formula.
Data-attribute tiers
Add or edit tiers by changing from/to/rate on a list item.
Framework-agnostic core
The tier-consumption loop is pure and ports to any state model.

About this UI Snippet

Tiered Usage Pricing Breakdown — Real Blended Cost Across Pricing Steps

Screenshot of the Tiered Usage Pricing Breakdown snippet rendered live

Usage-based pricing pages often show tiers as a static table and leave the actual math to the customer — this snippet does the math for them. It renders a free tier followed by two paid tiers, each with its own per-unit rate, and a units slider that computes the real blended cost by consuming usage tier by tier, exactly the way metered billing actually works.

Tier-by-tier consumption, not a flat rate

The pricing has four steps: units 1–1,000 are free, units 1,001–5,000 cost $0.01 each, units 5,001–50,000 cost $0.008 each, and units beyond 50,000 cost $0.006 each. render() computes, for each tier, exactly how many of the total units fall inside that tier's [from, to) range with Math.max(0, Math.min(units, to) - from), multiplies only that slice by the tier's rate, and sums the four tier costs — never applying one tier's rate to the whole usage figure.

Verified at three usage levels

At 10,000 units (the default): 1,000 are free, the next 4,000 cost $0.01 × 4,000 = $40, and the remaining 5,000 fall in the third tier at $0.008 × 5,000 = $40 — a total of $80.00, a blended rate of $80 ÷ 10,000 = $0.008/unit. At 50,000 units: $0 + (4,000 × $0.01 = $40) + (45,000 × $0.008 = $360) = $400.00. At 60,000 units: $0 + $40 + $360 + (10,000 × $0.006 = $60) = $460.00. Each total was computed the same tier-by-tier way the live widget computes it — the blended rate keeps dropping as usage grows, because more of the total lands in cheaper tiers.

A visual stepped bar per tier

Each tier row has its own fill bar showing how "full" that tier is relative to its own size — a tier shows 0% until usage reaches its starting point, fills toward 100% as usage passes through it, and stays at 100% once usage has moved past it into the next tier. The final open-ended tier fills to 100% the moment any usage lands in it, since it has no upper bound to measure against.

One blended number to anchor on

Beyond the itemized breakdown, a "blended $/unit" figure divides the total cost by total units — the single number that answers "what am I actually paying per unit, on average," which is always somewhere between the tiers' individual rates and drops as usage grows into cheaper tiers.

Where it fits

Pair it with a usage calculator for a simpler flat-rate estimate, place it next to a pricing card for a metered add-on, or route the estimate into a roi calculator to show cost-per-outcome.

Customizing it

Add more tiers, change the rates or breakpoints, or add a currency toggle. The tier-consumption math generalizes to any number of [from, to, rate] steps without changing the core loop.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSAt 10,000 units the total renders as $80.00.
  2. 2
    Drag the units sliderEach tier's bar fills and its own cost updates live.
  3. 3
    Watch the blended rate$/unit blended drops as usage grows into cheaper tiers.
  4. 4
    Push past 50,000 unitsThe fourth open-ended tier starts billing at $0.006/unit.
  5. 5
    Verify a total by handAt 60,000 units: $0 + $40 + $360 + $60 = $460.00.
  6. 6
    Wire up real tiersEdit each tier's data-from, data-to, and data-rate.

Real-world uses

Common Use Cases

API and metered billing
Show the real cost of API calls or storage, billing only the units that fall inside each tier as a slider moves.
Usage-based SaaS pricing
Pair with a usage calculator so a free tier and two paid tiers combine into one blended per-unit rate.
Add-on cost estimation
Sit beside a pricing card for a metered extra, with per-tier fill bars showing how full each tier is relative to its size.
Cost-benefit pages
Feed the computed total into an ROI calculator to weigh the spend against the value gained.
Enterprise volume pricing
Show how per-unit cost falls at higher volumes, or let a buyer's finance team model costs at different usage levels, as in enterprise pricing.
Related: Plan Downgrade Warning Card — Feature Loss Preview
See the Plan Downgrade Warning Card — Feature Loss Preview for a related pricing pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

For each tier, the code computes exactly how many units fall inside that tier's from-to range with Math.max(0, Math.min(units, to) - from), multiplies only that slice by the tier's own rate, and sums the four resulting tier costs. No tier's rate is ever applied to units outside its own range — this is the same tier-by-tier consumption real metered billing uses.

Yes. The first 1,000 units are free ($0). The next 4,000 units (1,001–5,000) cost $0.01 each, so $40. The remaining 5,000 units (5,001–10,000) fall in the $0.008/unit tier, so another $40. Total: $0 + $40 + $40 = $80.00, matching what the widget shows at the default 10,000-unit position.

The blended rate is total cost divided by total units. At 10,000 units it's $80 / 10,000 = $0.008/unit. At 60,000 units it's $460 / 60,000 ≈ $0.0077/unit — slightly lower, because a larger share of total usage falls into the cheaper $0.006 and $0.008 tiers rather than the free or $0.01 tiers, pulling the average down.

Its data-to attribute is the string "Infinity", which the script converts to the actual Infinity value, so Math.min(units, Infinity) always resolves to units itself — meaning any usage above 50,000 is fully counted in that tier at $0.006/unit. Its fill bar has no tierSize to measure against, so it simply shows 100% once any usage reaches it.

Model tiers as an array of {from, to, rate} objects (using Infinity for the last tier's to) in state or a constant. Derive each tier's units-in-tier, cost, and fill percentage with a memoized loop identical to the one here, and the total and blended rate as further derived values — the math needs no DOM access at all.