5b:I[473921,["/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0lpbs3388m8i9.js","/creators-assets/_next/static/immutable/chunks/1cyyov0z5q-kt.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/19vaojedolulr.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/09klh1t314i6_.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/15qb5jvtj_j-a.js","/creators-assets/_next/static/immutable/chunks/3p2-jhwmdt2w4.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2ypcsbrcjzeke.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3nnozhk_k4v6s.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/21ae0xqjlej6m.js","/creators-assets/_next/static/immutable/chunks/3xnhxg14xjx1h.js","/creators-assets/_next/static/immutable/chunks/0q4_4jbe5r70f.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js"],"PostDetailCard"] 5c:T769,

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.

58:[["$","$L5b",null,{"post":{"id":"01a1360d-7b04-7581-b91a-cf811394d548","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","slug":"-ds491f","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mwBm6cerW0wMaUh9EnNp","resolved":true,"title":"18 Price Calculator","body":"$5c","bodyJson":{"type":"doc","content":[{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"Customizable properties"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout — Card or Compact"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slider — unit label, min, max, step, default"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tiers — plan name, breakpoint, per-unit or flat price, note, optional base price"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tier ladder, marks, per-unit price and savings line on/off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom at Max — label, CTA text and link"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Billing toggle — yearly discount %, default period"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Currency — symbol position, space, decimals, separators (e.g. \"1.234,50 €\")"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rolling numbers, CTA, every label, colors, radius, shadow, fonts"}]}]}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"Why this component"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real tier breakpoints — the plan pill switches as visitors drag."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enterprise-ready \"Custom / Contact sales\" at the max."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Number formatting for US, EU and other locales."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessible native slider, reduced-motion aware, no external libraries."}]}]}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"Need help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"hello@brandingupstudio.com","marks":[{"type":"link","attrs":{"href":"mailto:hello@brandingupstudio.com","target":"_blank","rel":"noopener noreferrer nofollow"}}]},{"type":"text","text":" — we usually reply within 72 hours. Custom edits are available from $75/hr."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with code but fully customizable via property controls. Unlink is not provided so we can keep delivering updates."}]}]},"introduction":"Slider pricing with plan tiers","slug":"18-price-calculator","author":{"framerUserId":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","slug":"-ds491f","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/01a1360d-43b7-74da-b67a-32327a1e9c35.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-13T16:16:54.808Z","updatedAt":"2026-10-13T16:16:54.808Z","publishedAt":"2026-10-13T16:16:54.805Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://small-convention-270138.framer.app/pricing-calculator","price":"12","paymentUrl":"https://brandingup.lemonsqueezy.com/checkout/buy/eddb6063-e941-4cef-8690-768ec0fe8534","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"9pLXc8iecCIu5PsfoiaR","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-13T16:16:55.556Z","updatedAt":"2026-10-13T16:16:55.556Z","reported":false,"type":"post"}}],"$L5d"]

Suggested for you