Usage-based Pricing

<div class="container py-5">
  <div class="row g-4 align-items-center">
    <div class="col-md-6">
      <h2 class="fw-bold">Pay for what you use</h2>
      <p class="text-muted">Move the slider to estimate your monthly bill. Cancel anytime.</p><label class="form-label fw-semibold">API calls: <span id="usage-val">100k</span></label><input type="range" min="10" max="1000" value="100" class="form-range" id="usage-slider">
      <div class="d-flex justify-content-between small text-muted"><span>10k</span><span>1M</span></div>
    </div>
    <div class="col-md-6">
      <div class="p-4 border rounded-4 bg-light">
        <h6 class="text-muted">Your estimate</h6>
        <h1 class="fw-bold">$<span id="usage-price">10</span><span class="fs-6">/mo</span></h1>
        <ul class="list-unstyled small mt-3">
          <li>✓ 99.9% uptime SLA</li>
          <li>✓ Global edge network</li>
          <li>✓ 24/7 support</li>
        </ul><a href="#" class="btn btn-primary w-100 mt-2">Start free trial</a>
      </div>
    </div>
  </div>
</div>