FlexPricingSlider

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

1. Drop the component on the canvas

2. In Plans, edit name / monthly / yearly (3–4 plans recommended)

3. Set Currency, Accent, Save badge color, Radius

4. Pick Layout mode (Auto / Side-by-side / Stacked)

5. 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