Search blocks by description or jump to a page.
A pricing calculator with sliders and inputs that estimate cost from usage. Use it when plans scale by seats, requests, or volume so buyers see real numbers.
Pricing Calculator opens with a centered heading and a short tagline, then a tab strip that switches between monthly and annual billing (annual shows a 20% saving label). Below the tabs sits a card holding a labeled slider that lets a visitor drag their expected monthly API call volume from 1,000 up to 1,000,000, with a live count badge that updates as they drag. Three plan cards sit beneath it in a responsive grid: Starter, Growth, and Scale. Each card shows a computed price that responds to both the slider position and the active billing tab, a base plus usage breakdown line, a feature list with check icons, and a call to action button. Growth is visually accented as the recommended tier. A rate table below the grid documents the four tiered overage rates in a compact bordered table, and a footer line links visitors to a sales contact for custom volume deals.
The heading, tagline, plan names, feature lists, and button labels are all plain copy you can swap freely. The number of plans and their included allowances live in a short data array, so adding or removing a tier is a single entry. The rate table rows and the annual discount percentage are also isolated constants, making it straightforward to adjust the economics without touching the layout.
Reach for this block when your product charges by volume and a flat price card would leave buyers guessing at their real bill. It works well for platforms where usage varies widely across accounts, such as a logistics and delivery service billing by shipment events, API calls per route optimization request, or webhook deliveries per carrier integration. Buyers can key in their expected throughput and see a number they can actually budget against, which reduces pricing objections before a sales conversation starts. The feature grid alternative is better when the decision turns on which features each tier unlocks rather than a cost estimate.
A natural flow around it on a Marketing (Legacy) page:
Before
After
All three interactive layers update together, so the block covers a wide range of usage-based billing models:
Tip: set the slider default to a value that lands squarely inside the Growth plan's included allowance so the recommended tier is highlighted on first load without any interaction.