New
New
New
Guide
- Beginner
- Pricing slider
Guide
- Beginner
- Pricing slider
Guide
- Beginner
- Pricing slider
Creating a Dynamic Pricing Slider
In this Framer tutorial, you're going to learn how to create a dynamic pricing slider component for your Framer sites. The great thing is that we're going to be able to create it without any coding. I'll walk you through step-by-step on how to set up the component and create a tiered pricing slider that changes labels and buttons when the slider is adjusted.
Posted by
Nandi
Table of contents
Inspiration behind the pricing slider
The other day, I was browsing pricing pages and stumbled upon lindy.ai/pricing. It had a beautiful pricing slider with different stops that updated dynamically. My first thought? We should totally be able to do this in Framer!
So, I built a Pricing Slider Component that not only replicates that functionality but actually makes it even better—with customizable animations. Now, let me show you how to use it.
Getting started
To make things easier, I’ve put together a starter project for you. Just grab the Pricing Slider component and start customizing it instantly.
Once you open the project, you’ll find a pricing card that’s already set up. Now, let’s configure it to display dynamic pricing for different tiers!
Understanding the three modes
The Pricing Slider component has three different modes, each serving a specific purpose:
Slider Mode – The interactive element that lets users adjust pricing dynamically.
Inspiration behind the pricing slider
The other day, I was browsing pricing pages and stumbled upon lindy.ai/pricing. It had a beautiful pricing slider with different stops that updated dynamically. My first thought? We should totally be able to do this in Framer!
So, I built a Pricing Slider Component that not only replicates that functionality but actually makes it even better—with customizable animations. Now, let me show you how to use it.
Getting started
To make things easier, I’ve put together a starter project for you. Just grab the Pricing Slider component and start customizing it instantly.
Once you open the project, you’ll find a pricing card that’s already set up. Now, let’s configure it to display dynamic pricing for different tiers!
Understanding the three modes
The Pricing Slider component has three different modes, each serving a specific purpose:
Slider Mode – The interactive element that lets users adjust pricing dynamically.
Inspiration behind the pricing slider
The other day, I was browsing pricing pages and stumbled upon lindy.ai/pricing. It had a beautiful pricing slider with different stops that updated dynamically. My first thought? We should totally be able to do this in Framer!
So, I built a Pricing Slider Component that not only replicates that functionality but actually makes it even better—with customizable animations. Now, let me show you how to use it.
Getting started
To make things easier, I’ve put together a starter project for you. Just grab the Pricing Slider component and start customizing it instantly.
Once you open the project, you’ll find a pricing card that’s already set up. Now, let’s configure it to display dynamic pricing for different tiers!
Understanding the three modes
The Pricing Slider component has three different modes, each serving a specific purpose:
Slider Mode – The interactive element that lets users adjust pricing dynamically.
Slider mode.
Slider mode.
Slider mode.
Label Mode – Displays the current price or other values based on the slider position.
Label Mode – Displays the current price or other values based on the slider position.
Label Mode – Displays the current price or other values based on the slider position.
Label mode.
Label mode.
Label mode.
Button Mode – A button that updates dynamically with the selected pricing tier.
Button Mode – A button that updates dynamically with the selected pricing tier.
Button Mode – A button that updates dynamically with the selected pricing tier.
Button mode.
Button mode.
Button mode.
We’ll go through each mode step by step to build a fully functional pricing slider.
Setting up the slider mode
First, let’s configure the slider itself:
Position it inside your pricing card.
In the right panel, set its width to Fill so it adapts responsively.
Define the number of stops – these determine how many pricing options users can toggle between.
Customize the slider’s appearance, including line style, handle, and dot indicators. You can adjust their colors or remove the dots if you don’t need them.
We’ll go through each mode step by step to build a fully functional pricing slider.
Setting up the slider mode
First, let’s configure the slider itself:
Position it inside your pricing card.
In the right panel, set its width to Fill so it adapts responsively.
Define the number of stops – these determine how many pricing options users can toggle between.
Customize the slider’s appearance, including line style, handle, and dot indicators. You can adjust their colors or remove the dots if you don’t need them.
We’ll go through each mode step by step to build a fully functional pricing slider.
Setting up the slider mode
First, let’s configure the slider itself:
Position it inside your pricing card.
In the right panel, set its width to Fill so it adapts responsively.
Define the number of stops – these determine how many pricing options users can toggle between.
Customize the slider’s appearance, including line style, handle, and dot indicators. You can adjust their colors or remove the dots if you don’t need them.
Slider mode set up.
Slider mode set up.
Slider mode set up.
Connecting the pricing label
Now, let’s make the pricing update dynamically:
Duplicate the Pricing Slider component.
Move the duplicated component into the pricing label area.
Switch its mode from Slider to Label in the settings panel.
Set its width to Fit Content to keep the text aligned properly.
Enter the pricing values for each stop in the text array (e.g., $24, $59, $89, $129, $249).
To make the label stand out, tweak these font settings:
Size: 36px
Weight: Medium or Bold
Line Height: Adjust for proper alignment
You can also add prefixes (like a dollar sign) or suffixes (like “/month”) as needed.
Connecting the pricing label
Now, let’s make the pricing update dynamically:
Duplicate the Pricing Slider component.
Move the duplicated component into the pricing label area.
Switch its mode from Slider to Label in the settings panel.
Set its width to Fit Content to keep the text aligned properly.
Enter the pricing values for each stop in the text array (e.g., $24, $59, $89, $129, $249).
To make the label stand out, tweak these font settings:
Size: 36px
Weight: Medium or Bold
Line Height: Adjust for proper alignment
You can also add prefixes (like a dollar sign) or suffixes (like “/month”) as needed.
Connecting the pricing label
Now, let’s make the pricing update dynamically:
Duplicate the Pricing Slider component.
Move the duplicated component into the pricing label area.
Switch its mode from Slider to Label in the settings panel.
Set its width to Fit Content to keep the text aligned properly.
Enter the pricing values for each stop in the text array (e.g., $24, $59, $89, $129, $249).
To make the label stand out, tweak these font settings:
Size: 36px
Weight: Medium or Bold
Line Height: Adjust for proper alignment
You can also add prefixes (like a dollar sign) or suffixes (like “/month”) as needed.
Pricing label.
Pricing label.
Pricing label.
Adding animations
To make the pricing update feel smoother, apply text animations:
Flow Animation – Creates a seamless price transition.
Counter Animation – Animates numbers increasing or decreasing dynamically.
Experiment with both and pick the one that fits your design!
Linking additional elements
Most pricing pages display more than just a price—they update multiple elements, like credits or features. Let’s add dynamic values for credits.
Setting up a credits label
Duplicate the Label Mode component.
Move it to the credits section of your pricing card.
Adjust the text array to match credit tiers (e.g., 1,000 – 10,000 credits).
Add a suffix like "credits" to display “10,000 credits.”
Now, as the slider moves, both the price and credits will update dynamically!
Adding a task limit
We can follow the same approach to display task limits:
Duplicate the Pricing Label again.
Update the text array with task limit values (e.g., 10, 20, 30 tasks).
Add a prefix like “Tasks up to” and a suffix “per month.”
Now, every aspect of the pricing plan updates dynamically with the slider!
Creating a pricing button
To make a button that reflects the selected price:
Duplicate the Pricing Slider component again.
Change its mode to Button Mode in the settings.
Adjust the text format to display dynamic pricing, such as “Get Started ( $59/month)”.
Customize the button’s appearance:
Set the width and font size (16px font, 1.4 line height, Medium weight).
Change the button’s fill color for better contrast (e.g., a darker blue).
Add a hover state with a color change effect.
If you want, you can link different pricing tiers to unique URLs based on the selection.
Adding animations
To make the pricing update feel smoother, apply text animations:
Flow Animation – Creates a seamless price transition.
Counter Animation – Animates numbers increasing or decreasing dynamically.
Experiment with both and pick the one that fits your design!
Linking additional elements
Most pricing pages display more than just a price—they update multiple elements, like credits or features. Let’s add dynamic values for credits.
Setting up a credits label
Duplicate the Label Mode component.
Move it to the credits section of your pricing card.
Adjust the text array to match credit tiers (e.g., 1,000 – 10,000 credits).
Add a suffix like "credits" to display “10,000 credits.”
Now, as the slider moves, both the price and credits will update dynamically!
Adding a task limit
We can follow the same approach to display task limits:
Duplicate the Pricing Label again.
Update the text array with task limit values (e.g., 10, 20, 30 tasks).
Add a prefix like “Tasks up to” and a suffix “per month.”
Now, every aspect of the pricing plan updates dynamically with the slider!
Creating a pricing button
To make a button that reflects the selected price:
Duplicate the Pricing Slider component again.
Change its mode to Button Mode in the settings.
Adjust the text format to display dynamic pricing, such as “Get Started ( $59/month)”.
Customize the button’s appearance:
Set the width and font size (16px font, 1.4 line height, Medium weight).
Change the button’s fill color for better contrast (e.g., a darker blue).
Add a hover state with a color change effect.
If you want, you can link different pricing tiers to unique URLs based on the selection.
Adding animations
To make the pricing update feel smoother, apply text animations:
Flow Animation – Creates a seamless price transition.
Counter Animation – Animates numbers increasing or decreasing dynamically.
Experiment with both and pick the one that fits your design!
Linking additional elements
Most pricing pages display more than just a price—they update multiple elements, like credits or features. Let’s add dynamic values for credits.
Setting up a credits label
Duplicate the Label Mode component.
Move it to the credits section of your pricing card.
Adjust the text array to match credit tiers (e.g., 1,000 – 10,000 credits).
Add a suffix like "credits" to display “10,000 credits.”
Now, as the slider moves, both the price and credits will update dynamically!
Adding a task limit
We can follow the same approach to display task limits:
Duplicate the Pricing Label again.
Update the text array with task limit values (e.g., 10, 20, 30 tasks).
Add a prefix like “Tasks up to” and a suffix “per month.”
Now, every aspect of the pricing plan updates dynamically with the slider!
Creating a pricing button
To make a button that reflects the selected price:
Duplicate the Pricing Slider component again.
Change its mode to Button Mode in the settings.
Adjust the text format to display dynamic pricing, such as “Get Started ( $59/month)”.
Customize the button’s appearance:
Set the width and font size (16px font, 1.4 line height, Medium weight).
Change the button’s fill color for better contrast (e.g., a darker blue).
Add a hover state with a color change effect.
If you want, you can link different pricing tiers to unique URLs based on the selection.
Dynamic pricing button.
Dynamic pricing button.
Dynamic pricing button.
Grouping components
To ensure all elements update together (price, credits, button, etc.), assign them the same Group Name on the right panel. For example, if you’re working on the Pro tier, name all components in that section “Pro.” This links them so they communicate seamlessly.
That’s it!
You’ve now built a fully functional Dynamic Pricing Slider in Framer—without writing a single line of code.
Now hit Preview and test it out!
If you need more guidance, check out the full video tutorial on How to Create a Dynamic Pricing Slider.
Grouping components
To ensure all elements update together (price, credits, button, etc.), assign them the same Group Name on the right panel. For example, if you’re working on the Pro tier, name all components in that section “Pro.” This links them so they communicate seamlessly.
That’s it!
You’ve now built a fully functional Dynamic Pricing Slider in Framer—without writing a single line of code.
Now hit Preview and test it out!
If you need more guidance, check out the full video tutorial on How to Create a Dynamic Pricing Slider.
Grouping components
To ensure all elements update together (price, credits, button, etc.), assign them the same Group Name on the right panel. For example, if you’re working on the Pro tier, name all components in that section “Pro.” This links them so they communicate seamlessly.
That’s it!
You’ve now built a fully functional Dynamic Pricing Slider in Framer—without writing a single line of code.
Now hit Preview and test it out!
If you need more guidance, check out the full video tutorial on How to Create a Dynamic Pricing Slider.
