Component
Pricing Slider Component for Framer
This is a fully customizable pricing slider component for Framer, recreated from the Lindy’s website. It has three modes—label, button, and slider—and lets you create dynamic pricing that suits your needs.
About the resource
The Pricing Slider component has three modes: Slider, Label, and Button.
Slider Mode: The slider mode lets you adjust pricing dynamically with a customizable range. You can set the number of stops, and adjust the line and handle styles. The dots have customizable colors and can be removed if not needed. The text displayed at each stop can be customized, and if the text is numeric, it can animate as the slider value changes. You can also customize the font, color, and add a prefix or suffix to the text.
About the resource
The Pricing Slider component has three modes: Slider, Label, and Button.
Slider Mode: The slider mode lets you adjust pricing dynamically with a customizable range. You can set the number of stops, and adjust the line and handle styles. The dots have customizable colors and can be removed if not needed. The text displayed at each stop can be customized, and if the text is numeric, it can animate as the slider value changes. You can also customize the font, color, and add a prefix or suffix to the text.
About the resource
The Pricing Slider component has three modes: Slider, Label, and Button.
Slider Mode: The slider mode lets you adjust pricing dynamically with a customizable range. You can set the number of stops, and adjust the line and handle styles. The dots have customizable colors and can be removed if not needed. The text displayed at each stop can be customized, and if the text is numeric, it can animate as the slider value changes. You can also customize the font, color, and add a prefix or suffix to the text.
The pricing slider component (slider mode) properties in Framer.
The pricing slider component (slider mode) properties in Framer.
The pricing slider component (slider mode) properties in Framer.
Label Mode: In label mode, you can display dynamic text for each stop along the slider. The text will adjust based on the slider value, with customization options for font, color, and text decoration like underline or strikethrough. You can balance multi-line text, and you can also specify whether users can select the text.
Label Mode: In label mode, you can display dynamic text for each stop along the slider. The text will adjust based on the slider value, with customization options for font, color, and text decoration like underline or strikethrough. You can balance multi-line text, and you can also specify whether users can select the text.
Label Mode: In label mode, you can display dynamic text for each stop along the slider. The text will adjust based on the slider value, with customization options for font, color, and text decoration like underline or strikethrough. You can balance multi-line text, and you can also specify whether users can select the text.
The pricing slider component (label mode) properties in Framer.
The pricing slider component (label mode) properties in Framer.
The pricing slider component (label mode) properties in Framer.
Button Mode: In button mode, the text displayed on the button changes with the slider value. You can customize the button’s appearance, including fill color, radius, padding, border, and shadows. The text can be linked to a different URL for each stop.
Each of these modes can be customized to fit your design needs, and you can add multiple instances of the component on a page.
Button Mode: In button mode, the text displayed on the button changes with the slider value. You can customize the button’s appearance, including fill color, radius, padding, border, and shadows. The text can be linked to a different URL for each stop.
Each of these modes can be customized to fit your design needs, and you can add multiple instances of the component on a page.
Button Mode: In button mode, the text displayed on the button changes with the slider value. You can customize the button’s appearance, including fill color, radius, padding, border, and shadows. The text can be linked to a different URL for each stop.
Each of these modes can be customized to fit your design needs, and you can add multiple instances of the component on a page.
The pricing slider component (button mode) properties in Framer.
The pricing slider component (button mode) properties in Framer.
The pricing slider component (button mode) properties in Framer.
Make sure all components within a group share the same name to enable them to communicate with each other. For instance, for the Pro pricing group, I used the name "Pro" for all components in that group, each with a different mode.
Make sure all components within a group share the same name to enable them to communicate with each other. For instance, for the Pro pricing group, I used the name "Pro" for all components in that group, each with a different mode.
Make sure all components within a group share the same name to enable them to communicate with each other. For instance, for the Pro pricing group, I used the name "Pro" for all components in that group, each with a different mode.
