---
title: "FlexPricingSlider — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Can Girgin · Buttons. Plan selector with billing toggle"
canonical: "https://framer.elliotli.dev/component/flexpricingslider"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/FlexPricingSlider

# FlexPricingSlider

Plan selector with billing toggle

[View on Framer](https://framer.com/marketplace/components/flexpricingslider/?via=elliot-li)

![FlexPricingSlider preview image 1](https://framer.elliotli.dev/og/component/flexpricingslider/ef0f165019614b66/1600x1200.jpg)

## Summary

Plan selector with billing toggle

## Description

**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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10612

## Details

- **Author**: Can Girgin
- **Price**: $10.00
- **Published**: 2025-09-11
- **Updated**: 2026-01-18
- **Added**: 2025-09-01
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything