---
title: "Price Slider Card — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Cards. What is Price Slider Card?"
canonical: "https://framer.elliotli.dev/component/price-slider-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Price Slider Card

# Price Slider Card

High-converting SaaS pricing slider.

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

![Price Slider Card preview image 1](https://framer.elliotli.dev/og/component/price-slider-card/6abe191ff70aa598/1600x1200.jpg)

## Summary

What is Price Slider Card?

## Description

## What is Price Slider Card?

An interactive, high-end pricing module designed for SaaS companies scaling their user bases. It features a continuous slider that dynamically updates tiered pricing data, seamlessly transitioning between monthly and annual plans. Built with premium aesthetics and micro-animations, it provides an exceptional checkout experience that builds instant trust and accelerates customer acquisition.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Dynamic price updating based on interactive slider input
    
-   Fluid, physics-based micro-interactions and hover effects
    
-   Integrated monthly and annual billing toggle with automatic discounts
    
-   Four premium dark-mode theme presets
    
-   Fully responsive layout that gracefully adapts to any screen size automatically
    

## Controls inside Framer

### Theme Preset

-   Theme preset selection
    

### Slider

-   Title text
    
-   Steps array
    
-   Default starting step
    
-   Step suffix label
    
-   Number formatting toggle
    

### Plans

-   Total number of plans
    
-   Default active plan
    

### Plan Details

-   Plan name
    
-   SVG icon path
    
-   Tiered prices array
    
-   Billing period label
    
-   Tagline description
    
-   Feature list
    
-   Call to action text
    
-   Call to action link
    
-   Highlighted status toggle
    

### Layout & Toggles

-   Maximum container width
    
-   Container padding
    
-   Yearly discount percentage
    

### Theme Overrides

-   Complete color customization for all text layers
    
-   Custom background and border colors for standard and highlighted cards
    
-   Advanced slider track, fill, and thumb color controls
    
-   Custom badge and call to action button styling
    
-   Adjustable card border radius
    

## Best use cases

-   Tiered SaaS subscription models based on active users or usage metrics
    
-   Enterprise software pricing pages requiring detailed feature breakdowns
    
-   Startup landing pages aiming for a high-end, trustworthy aesthetic
    
-   Usage-based billing calculators
    

Deploy a polished, high-converting checkout experience in minutes to accelerate your sales pipeline.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

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

-   All · #9200

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-06-12
- **Updated**: 2026-06-13
- **Added**: 2026-06-07
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator