About 18 Price Calculator
What it does
A pricing calculator for SaaS and app pricing pages. Visitors drag a slider (seats, users, credits — any unit you name) and the price rolls to the new amount instantly. Set tier breakpoints and the per-unit price drops as usage grows; the matching plan is highlighted automatically, with the per-unit rate and savings shown under the total.
Flip the monthly / yearly toggle for a "Save X%" badge and a "Billed … per year" line. Turn on "Custom at Max" and the top of the slider becomes "Custom" with a "Contact sales" button.
Customizable properties
Layout — Card or Compact
Slider — unit label, min, max, step, default
Tiers — plan name, breakpoint, per-unit or flat price, note, optional base price
Tier ladder, marks, per-unit price and savings line on/off
Custom at Max — label, CTA text and link
Billing toggle — yearly discount %, default period
Currency — symbol position, space, decimals, separators (e.g. "1.234,50 €")
Rolling numbers, CTA, every label, colors, radius, shadow, fonts
Why this component
Real tier breakpoints — the plan pill switches as visitors drag.
Enterprise-ready "Custom / Contact sales" at the max.
Number formatting for US, EU and other locales.
Accessible native slider, reduced-motion aware, no external libraries.
Need help?
Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr.
Built with code but fully customizable via property controls. Unlink is not provided so we can keep delivering updates.
