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.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 1 runtime package
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 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 active tier row carries a spring highlight that moves as the tier changes. The server HTML renders the initial 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.
Estimate your monthly price
Slide to your team size and the price updates to match.
$9 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
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, used in labels. |
| currency | string | "$" | Prefix symbol rendered before every price. |
| 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, slider, tier rows and CTA paint with the global background, foreground, muted, border and ring semantic tokens, so retheming those tokens rethemes the whole calculator. Adjust width and spacing from the className prop:
<PricingSliderCalculator
tiers={tiers}
unitName="requests"
currency="£"
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);
--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 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. The server render shows the initial 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.