FlexPricingSlider

Plan selector with billing toggle

Flex Pricing Slider is a beautiful, responsive “choose your plan” control built for Framer. It ships with sane defaults, minimal panel settings, and smooth UX out of the box. Highlights Monthly / Yearly toggle + automatic Save % badge Currency & locale formatting (auto or manual) Layout modes: Auto, Side-by-side, Stacked Keyboard accessible (← / →), large drag targets CTA with params: ?plan=Pro&cycle=monthly&price=19 Designed to look great at all widths (no breakpoints needed) Quick Start Drop the component on the canvas In Plans , edit name / monthly / yearly (3–4 plans recommended) Set Currency , Accent , Save badge color, Radius Pick Layout mode (Auto / Side-by-side / Stacked) Set CTA URL (Stripe or your checkout). Done ✅ Tips The Save badge shows when yearly < monthly × 12 For very narrow slots on desktop, use Stacked layout Keep plan names short (e.g., Starter , Pro , Team , Business ) What’s included Code component (TypeScript) Clean default styling + responsive scaling Minimal, comprehensible property panel

Plan selector with billing toggle