FlexPricingSlider
Clean, responsive plan selector for Framer. Monthly/Yearly toggle with “Save %”, currency & locale formatting, desktop layout modes, and CTA with plan params. Plug-and-play.
Make it with Workshop
Build your own component with AI
About this Component
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
