Usage-based rate card with live total

Interactive rate card where dragging each usage slider recalculates the line cost and the monthly total live, mirrors how Stripe visualizes usage-based pricing. Best on a usage-billing or API-product pricing page, overkill for a flat-fee service business.

pattern · stripe.com card composite formvanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="sw-rate-card">
  <h3>Update rate card</h3>
  <div class="sw-rate-row">
    <span>API requests</span>
    <input type="range" min="0" max="50000" value="10000" step="1000" class="sw-rate-slider" data-rate="0.002" data-out="swReqOut" />
    <span class="sw-rate-out" id="swReqOut">10,000 &times; $0.0020</span>
  </div>
  <div class="sw-rate-row">
    <span>Storage (GB)</span>
    <input type="range" min="0" max="500" value="100" step="10" class="sw-rate-slider" data-rate="0.03" data-out="swStoreOut" />
    <span class="sw-rate-out" id="swStoreOut">100 &times; $0.030</span>
  </div>
  <div class="sw-rate-row">
    <span>Compute (hrs)</span>
    <input type="range" min="0" max="100" value="25" step="5" class="sw-rate-slider" data-rate="0.54" data-out="swComputeOut" />
    <span class="sw-rate-out" id="swComputeOut">25 &times; $0.54</span>
  </div>
  <div class="sw-rate-total">
    <span>Estimated monthly total</span>
    <strong id="swRateTotal">$49.00</strong>
  </div>
  <button class="sw-rate-cta">Get started</button>
</div>

Block id: stripe-usage-rate-calculatorvanilla · code-required

More card blocks

Split hero with booking-card mockup

cal.com

Floating booking-confirmation mockup card

cal.com

Issue tracker card with live activity feed

linear

Rotating project health status list

linear

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call