Slider Pricing Calculator
A free usage-based pricing calculator for React and Next.js: a slider sets the tier and the price rolls to match, with an accessible plan summary.
Pay for what you use
Estimate your monthly price
Start on the tier that fits today and move whenever your usage changes.
$79 per month
- SoloFor individuals and side projects.$9
- TeamFor small teams shipping every week.$29
- BusinessFor scaling companies with more seats.$79
- EnterpriseFor large organisations and departments.$149
Slider Pricing Calculator is a free pricing calculator for Next.js and React, built with Motion and styled with Tailwind. A real labelled range slider with a designed track, accent fill and thumb sets a quantity, the matching tier is derived from that quantity, and the displayed price rolls to the new value one digit at a time: only the digits that change slide, and each numeral reserves a fixed width so the price never shifts layout.
The price sits on the card's content edge whatever the value, so a short price lines up with the headline, the slider and the button rather than floating in the space its widest value reserves. The calculator rests partway up the range instead of at its minimum, so the first thing a visitor sees is a price that has already been worked out. The active tier row carries a spring highlight that moves as the tier changes. The server HTML renders the resting quantity's price and tier as real text, so it works with JavaScript disabled. The slider exposes a meaningful aria-valuetext, the price digits are hidden from assistive technology with the accessible price supplied separately, and a polite live region announces the settled tier and price once per interaction. With reduced motion enabled the price swaps instantly and the slider stays fully operable.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/pricing-slider-calculatorUsage
import { PricingSliderCalculator } from "@/components/pricing-slider-calculator";
export default function Page() {
return (
<PricingSliderCalculator
unitName="seats"
cta={{ label: "Start free trial", href: "/signup" }}
tiers={[
{ upTo: 5, unitLabel: "Solo", price: 9, blurb: "For individuals." },
{ upTo: 20, unitLabel: "Team", price: 29, blurb: "For small teams." },
{ upTo: 50, unitLabel: "Business", price: 79, blurb: "For scaling." },
]}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tiers | PricingTier[] | required | Tiers in ascending upTo order. Each tier carries upTo (the inclusive quantity bound), unitLabel (the tier name), price (per month) and an optional blurb. The last tier's upTo is the slider maximum and the current tier is derived from the slider quantity. |
| unitName | string | "seats" | What one unit of slider quantity represents, given as the plural form. At a quantity of exactly 1 the singular is used instead: unitNameSingular when provided, otherwise a trailing 's' is dropped as an approximation that only suits regular plurals. |
| unitNameSingular | string | undefined | Explicit singular form of unitName, used whenever the quantity is exactly 1 in the readout, aria-valuetext and the live announcement. Pass it whenever stripping a trailing 's' is wrong, such as 'companies' needing 'company'; when omitted, that heuristic is the fallback. |
| currency | string | "$" | Prefix symbol rendered before every price. |
| defaultQuantity | number | 30% of the range | Quantity the slider rests on before anyone touches it, rounded and clamped into the range of 1 to the last tier's upTo. Omitted, it resolves to 30% of the range, raised past the first tier's ceiling if that fraction still lands in the cheapest tier, so the calculator opens on a partly filled track and a tier above the entry one instead of parked at its minimum. Pass 1 for the minimum. |
| cta | { label: string; href: string } | required | Primary call to action, rendered as a real anchor with inverted tokens and a visible focus ring. |
| className | string | undefined | Additional classes merged onto the section. |
Customisation
Slider Pricing Calculator declares no tokens of its own. The panel, tier rows and CTA paint with the global background, foreground, muted and border semantic tokens, the slider fill, thumb and active tier frame take the global primary token, and the focus ring takes ring, so retheming those tokens rethemes the whole calculator. Adjust width and spacing from the className prop:
<PricingSliderCalculator
tiers={tiers}
unitName="requests"
currency="£"
defaultQuantity={250}
cta={{ label: "Get started", href: "/signup" }}
className="mx-auto max-w-2xl"
/>
/* retheme the calculator via the semantic tokens */
:root {
--background: oklch(0.16 0.02 280);
--foreground: oklch(0.97 0.01 280);
--primary: oklch(0.62 0.19 280);
--ring: oklch(0.72 0.15 280);
}Frequently asked questions
- Is Slider Pricing Calculator free for commercial use?
- Yes. Slider Pricing Calculator is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is the pricing calculator accessible?
- Yes. The control is a real range input with a visible Number of label, and it exposes an aria-valuetext that reads the quantity and the matching monthly price, so assistive technology hears the meaningful value rather than a raw number. The styled track, fill and thumb are aria-hidden visual overlays, so the control itself keeps native keyboard and touch behaviour, and the visible focus ring paints on the thumb. The rolling price digits are hidden from assistive technology and the accessible price is supplied separately, and a polite live region announces the settled tier and price once per interaction rather than on every input event. Only transform and opacity animate and every numeral reserves a fixed width, so nothing shifts layout, and with reduced motion enabled the price swaps instantly while the slider stays fully operable with arrow keys.
- How are the tiers and prices worked out?
- You pass tiers in ascending upTo order. The slider runs from 1 to the last tier's upTo, and the current tier is the first tier whose upTo covers the selected quantity, so the price always reflects the band the quantity falls into. Where it rests is the defaultQuantity prop, which without a value resolves to 30% of the range so the calculator opens having calculated something. The server render shows that resting quantity's price and tier as real text. Currency conversion and locale formatting are out of scope; the currency prop is a plain prefix symbol.