Related Snippets

57 in Pricing category
38–43 of 57
Tiered Usage Pricing Breakdown

Tiered Usage Pricing Breakdown

Annual Savings Badge

Annual Savings Badge

Pricing Tier Recommender Quiz

Pricing Tier Recommender Quiz

Pricing Add-On Selector

Pricing Add-On Selector

Seat-Based Pricing Calculator

Seat-Based Pricing Calculator

Pricing Card Currency Switcher

Pricing Card Currency Switcher

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

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

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.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to re-derive tiered billing math by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how Math.max(0, Math.min(units, to) - from) isolates only the units that fall inside one tier's range, why that formula correctly returns zero for tiers usage hasn't reached yet and the full tier size for tiers usage has completely passed through, and how summing each tier's own cost produces a true blended total rather than applying one flat rate to all units. The same assistant can help you verify the math further — ask it to compute the total for a usage figure you pick and confirm it matches manual tier-by-tier arithmetic — or extend the widget: ask how to add a fifth tier, how to let someone type an exact unit count instead of only dragging a slider, or how to add a monthly-cost-forecast chart across a range of possible usage levels. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a "tiered usage pricing breakdown" widget in plain HTML, CSS, and JavaScript with no framework or library.

Requirements:
- Define at least four pricing tiers as data (a from-unit, a to-unit or an open-ended/infinite upper bound for the last tier, and a per-unit rate), including one free tier and one open-ended final tier billed at the lowest rate.
- Add a units input (a range slider is fine) that lets the user pick a total monthly usage amount.
- For each tier, compute the number of units from the total usage that actually fall inside that specific tier's range — not the whole usage total — using a formula equivalent to clamping (min(units, tierTo) - tierFrom) to a minimum of zero, then multiply only that amount by the tier's own rate to get that tier's cost.
- Sum every tier's individual cost to produce the true total, and also compute and display a "blended" per-unit rate (total cost divided by total units) so the user has one summary number alongside the itemized breakdown.
- Give each tier a visual fill bar showing how full that tier is relative to its own size (0% before usage reaches it, proportionally filling as usage passes through it, 100% once usage has moved beyond it) — the open-ended final tier should just show 0% or 100% since it has no fixed size.
- Before finalizing, manually verify the total at three different usage levels against your own tier rates and breakpoints, confirming each tier's contribution and the summed total are arithmetically correct — do not use a flat "usage × single rate" shortcut anywhere.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

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>

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 real cost for API calls, storage, or compute usage.
Usage-based SaaS pricing
Pair with a usage calculator for a simpler estimate mode.
Add-on cost estimation
Sit beside a pricing card for a metered feature.
Cost-benefit pages
Feed the total into a roi calculator.
Enterprise volume pricing
Show how per-unit cost drops at scale on an enterprise pricing page.
Internal finance tools
Let a buyer's team model cost at different usage projections.
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.