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.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Instead of working through the index math by hand, paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the storage slider maps its 0-10 range through Math.round(storIdx * (steps.length-1) / 10) instead of just using storIdx as a direct array index the way the API slider does, and what would go wrong if both sliders used the same approach. It's worth an optimization question too — ask whether recalculating and rewriting all six DOM text nodes on every single oninput tick (which can fire dozens of times per drag) is worth debouncing or batching. For extending it, have it add a free-tier allowance that zeroes out cost below a threshold, a fourth pricing dimension like bandwidth following the existing lookup-array pattern, or an annual-vs-monthly toggle that discounts the computed total. 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 an interactive usage-based pricing calculator in plain HTML, CSS, and vanilla JavaScript with no libraries.

Requirements:
- Three range inputs, one each for API calls per month, storage in GB, and team seats, each paired with a label showing its current formatted value.
- The API calls slider must run from 0 to 10 but map to a non-linear lookup array of real-world usage tiers (e.g. 0, 1000, 5000, 10000, 25000, 50000, 100000, 250000, 500000, 1000000, 5000000) using the slider's integer value as a direct index into that array, not a linear interpolation.
- The storage slider must similarly run from 0 to 10 but map through a separate lookup array of realistic GB tiers using a rounded index calculation of the form round(sliderValue * (array.length - 1) / 10), since the array has fewer entries than the slider has steps.
- The seats slider can be a direct linear range (e.g. 1 to 50) with a flat per-seat rate.
- On every input event on any of the three sliders, recompute and display: each dimension's individual cost, the value label above each slider, and a running total, all read from constants for the per-unit rates so they're trivial to retune.
- Format large call counts with k/M suffixes (e.g. "50k", "1.2M") and format all prices to two decimal places with a dollar sign.
- Style the native range input's track and thumb consistently across WebKit and Firefox using the vendor-specific pseudo-elements, since the default browser appearance is inconsistent.

Step by step

How to Use

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
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
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
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
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
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.

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.

Loading…