webdevpuneet.com

Related Snippets

57 in Pricing category
52–57 of 57

Pricing FAQ

Upgrade Banner

Usage Pricing Calculator

Pricing Page

Pricing Toggle

Pricing Card

Usage Pricing Calculator — Free HTML CSS JS Snippet

Usage Pricing Calculator · Pricing · Plain HTML, CSS & JS · Live preview

CategoryPricing
TagsE-CommerceLanding Page

Copy & paste

Source Code

<div class="calc-wrap">
  <div class="calc-card">
    <div class="calc-header">
      <h2>Estimate your cost</h2>
      <p>Drag the sliders to match your expected usage</p>
    </div>

    <div class="sliders">
      <div class="slider-row">
        <div class="slider-meta">
          <span class="slider-name">API calls / month</span>
          <span class="slider-val" id="v-api">50,000</span>
        </div>
        <input type="range" id="s-api" min="0" max="10" value="5" oninput="calc()">
        <div class="tick-row">
          <span>0</span><span>100k</span><span>500k</span><span>1M</span><span>5M</span><span>10M</span>
        </div>
      </div>

      <div class="slider-row">
        <div class="slider-meta">
          <span class="slider-name">Storage (GB)</span>
          <span class="slider-val" id="v-storage">25 GB</span>
        </div>
        <input type="range" id="s-storage" min="0" max="10" value="5" oninput="calc()">
        <div class="tick-row">
          <span>0</span><span>10</span><span>50</span><span>100</span><span>250</span><span>500</span>
        </div>
      </div>

      <div class="slider-row">
        <div class="slider-meta">
          <span class="slider-name">Team seats</span>
          <span class="slider-val" id="v-seats">5 seats</span>
        </div>
        <input type="range" id="s-seats" min="1" max="50" value="5" oninput="calc()">
        <div class="tick-row">
          <span>1</span><span>10</span><span>25</span><span>50</span>
        </div>
      </div>
    </div>

    <div class="breakdown">
      <div class="b-row"><span>API calls</span><span id="c-api">$2.50</span></div>
      <div class="b-row"><span>Storage</span><span id="c-storage">$1.25</span></div>
      <div class="b-row"><span>Team seats</span><span id="c-seats">$25.00</span></div>
      <div class="b-row total"><span>Estimated monthly</span><span id="c-total">$28.75</span></div>
    </div>

    <div class="cta-row">
      <a href="#" class="btn-primary">Get started free</a>
      <p class="cta-note">Includes $10 free credit every month</p>
    </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

Three interactive sliders with live oninput cost update
Non-linear lookup arrays map 0–10 slider to real-world usage tiers
Custom styled range inputs via -webkit-slider-thumb and -moz-range-thumb
Per-line cost breakdown in a bordered list with rounded corners
Indigo accent total row with larger font size
Colour-coded value chip (indigo pill) above each slider showing current value
k/M number suffix formatting via fmt() function
$0.00 two-decimal price formatting via fmtPrice()
CTA button with free credit note below the breakdown
Responsive single-column card layout centred on all screen sizes

About this UI Snippet

Usage Pricing Calculator — Interactive Sliders, Non-Linear Scale & Live Cost Breakdown

Screenshot of the Usage Pricing Calculator snippet rendered live

If you need a pricing calculator that lets users estimate their bill before signing up, this snippet gives you a complete interactive cost estimator with three sliders, a live per-line cost breakdown, and a call-to-action — all in plain HTML, CSS, and vanilla JavaScript.

Why usage-based pricing needs an interactive calculator

Flat-rate pricing is easy to read. Usage-based pricing is not. When you charge per API call, per gigabyte, and per seat, a static pricing table cannot give users a personalised estimate. An interactive slider calculator solves this: the user sets their expected usage, the page shows their exact monthly cost, and price anxiety disappears before they click the CTA.

How the non-linear slider values work

The API calls slider covers a huge range — from 0 to 5 million calls per month. A standard linear range input cannot handle this: dragging 1mm would jump from 0 to 500k calls. Instead, the apiTiers array holds real-world usage tiers: [0, 1000, 5000, 10000, 25000, 50000, 100000, 250000, 500000, 1000000, 5000000]. The slider value (0–10) is used as a direct array index. Each step covers a meaningful usage tier rather than a linear percentage. The storageTicks array uses the same technique for storage: [0, 1, 2, 5, 10, 25, 50, 100, 250, 500] GB, mapped from a 0–10 slider via index rounding.

How the live cost calculation works

On every oninput event, calc() reads all three slider values, looks up the API and storage amounts from the lookup arrays, applies the flat rates (apiRate = $0.05 per 1000 calls, storage = $0.05/GB, seatRate = $5/seat), and updates all displayed values simultaneously: the value chip above each slider, each per-line cost in the breakdown, and the grand total. The fmt() function formats large numbers as k/M suffixes. fmtPrice() always shows two decimal places.

Custom styled range inputs

The default browser range input looks inconsistent across browsers. This snippet styles the track as a 4px rounded bar in a neutral grey, and the thumb as an 18px indigo circle with a soft glow ring (-webkit-slider-thumb and ::-moz-range-thumb pseudo-elements). This gives a consistent branded appearance in Chrome, Firefox, and Safari with no JavaScript.

Adapting the calculator to your pricing model

Edit apiRate, the storage rate, and seatRate at the top of the JS to match your actual pricing. Swap apiTiers for any lookup array that matches your usage bands — compute instances, bandwidth tiers, message counts, or request buckets. Add more slider rows by duplicating a .slider-row in HTML and adding a new dimension to calc(). The breakdown updates automatically.

Step by step

How to Use

  1. 1
    Drag the slidersMove any slider left or right to see the value chip update above the slider and the cost breakdown update below. All three dimensions update independently.
  2. 2
    Update pricing ratesIn the JS panel, change apiRate (cost per 1000 API calls), the inline storage rate (0.05 per GB), and seatRate (cost per seat per month) to match your actual pricing.
  3. 3
    Update the lookup arraysEdit the apiTiers and storageTicks arrays to match your real usage tiers. Each array index corresponds to one slider step — add or remove values to change the scale.
  4. 4
    Add a new pricing dimensionDuplicate a .slider-row in HTML, add a tick-row below it, add a cost variable in calc(), add a new .b-row line in the breakdown, and define the rate as a constant at the top of the JS.
  5. 5
    Update the CTA button linkReplace href="#" on .btn-primary with your signup or checkout URL. You can also pass the calculated total as a query parameter to pre-fill a checkout form.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component using useState and useMemo, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

Usage-based and metered SaaS pricing pages
Show users their personalised monthly cost before they commit, then route them to your pricing page or a billing toggle to pick a plan. API calls, storage, and seat pricing are the three most common usage-based billing axes — all covered by the three slider rows.
Developer tool and API product landing pages
Developers want to know their cost before integrating. An interactive calculator showing their expected API call count and storage usage converts significantly better than a static pricing table for metered products.
Cloud database and infrastructure pricing
The slider + breakdown pattern is exactly how AWS, GCP, and Azure pricing calculators work. Adapt storageTicks and rates to cover compute instances, bandwidth tiers, or database reads and writes.
Learn the non-linear range slider technique
The lookup array pattern maps a simple 0–10 input range to values spanning several orders of magnitude — building on the basic range slider snippet. This JavaScript technique applies anywhere you need a slider that covers vastly different scales — like audio frequency, file size, or geographic area.
Reduce pricing anxiety before checkout
Showing a personalised cost estimate eliminates the most common objection to signing up: "I do not know what I will actually pay." Users who see their cost is within budget convert faster and at higher rates than those reading abstract per-unit rates on a static page.
Style range inputs consistently across browsers
The WebKit and Mozilla thumb pseudo-elements demonstrate how to apply consistent cross-browser range input styling with CSS alone — a technique that applies to any slider in any project, not just pricing calculators.
Related: Student & Nonprofit Discount Card
See the Student & Nonprofit Discount Card for a related pricing pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

apiTiers and storageTicks are lookup arrays. The slider range is always 0–10, which maps directly to array indices. For storage, Math.round(storIdx * (storageTicks.length - 1) / 10) converts the 0–10 value to an array index. This means each drag step moves to the next tier — 0, 1, 2, 5, 10, 25, 50, 100, 250, or 500 GB — rather than incrementing by a fixed linear amount.

In HTML, duplicate a .slider-row block and give the slider a new id (e.g. s-bandwidth). Add a .b-row for bandwidth to the breakdown section. In JS, define a bandwidthTicks lookup array and bandwidthRate constant. In calc(), read the slider value, look up the bandwidth amount, compute the cost, and update the display elements. The layout stretches automatically to fit the new row.

Click "JSX" to download. In React, create useState hooks for each slider value (apiIdx, storIdx, seats). Wrap the calc logic in a useMemo that depends on all three values and returns an object with apiCost, storageCost, seatCost, and total. Replace oninput with onChange. The lookup arrays and rate constants stay the same.

In calc(), change the API cost line to: const billableCalls = Math.max(0, apiCalls - FREE_API_TIER); const apiCost = (billableCalls / 1000) * apiRate; where FREE_API_TIER is a constant like 10000. The displayed cost shows $0.00 until the user drags past the free tier, then rises from there.