Dynamic Slider
Dynamic slider pricing section with smooth transitions.
Main Features of Dynamic Slider
How to Use Dynamic Slider in Next.js
Installation Guide for Dynamic Slider
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
title | string | Scale as you grow | Section title text. |
subtitle | string | Pay only for what you need. No hidden fees. | Section subtitle text. |
tiers | Array<{title: string, desc: string, threshold: number}> | [] | Array of pricing tiers with title, description, and threshold. |
features | string[] | [] | Array of feature strings to display. |
minUsers | number | 1 | Minimum number of users. |
maxUsers | number | 50 | Maximum number of users. |
defaultUsers | number | 5 | Default number of users. |
pricePerUser | number | 12 | Price per user. |
backgroundColor | string | #f8fafc | Background color (hex, rgb, or hsl). |
cardBgColor | string | #ffffff | Card background color. |
cardShadowColor | string | rgba(0,0,0,0.1) | Card shadow color. |
titleColor | string | #0f172a | Title text color. |
subtitleColor | string | #64748b | Subtitle text color. |
labelColor | string | #94a3b8 | Label text color. |
userCountColor | string | #2563eb | User count text color. |
totalColor | string | #0f172a | Total price text color. |
sliderBgColor | string | #f1f5f9 | Slider background color. |
sliderFillColor | string | #2563eb | Slider fill color. |
sliderHandleBgColor | string | #ffffff | Slider handle background color. |
sliderHandleBorderColor | string | #2563eb | Slider handle border color. |
sliderIconColor | string | #2563eb | Slider icon color. |
tierActiveBorderColor | string | #2563eb | Active tier border color. |
tierActiveBgColor | string | #eff6ff | Active tier background color. |
tierInactiveBorderColor | string | #f1f5f9 | Inactive tier border color. |
tierTitleColor | string | #0f172a | Tier title text color. |
tierDescColor | string | #64748b | Tier description text color. |
tierFeatureTextColor | string | #0f172a | Tier feature text color. |
tierFeatureCheckColor | string | #2563eb | Tier feature check color. |
buttonBgColor | string | #2563eb | Button background color. |
buttonTextColor | string | #ffffff | Button text color. |
buttonText | string | Get Started | Button text. |
Related Components
When to Use
Perfect for scaling businesses, usage-based products, and Next.js applications that want a tactile, dynamic 'cost calculator' feel. Use this React component for a slider-driven pricing section with real-time price updates and smooth tier transitions.
Best Practices
Follow React best practices by using clear, high-contrast labels for the slider thresholds. Maintain scalable component architecture by keeping the math simple for the user. Optimize for performance by using efficient state management for the slider values.
Why This Component Matters in Modern UI Development
Interactive sliders improve user transparency and agency. This production-ready component helpsคุณ build an interface that feels personalized and fair, allowing users to find their perfect 'sweet spot' for pricing.
Frequently Asked Questions
QHow does the calculation work?
The total price is calculated in real-time as the product of the `pricePerUser` and the current user count from the slider.
QAre the tiers automatic?
Yes, as the slider passes certain thresholds defined in the `tiers` prop, the corresponding category card becomes active.
QCan I adjust the user range?
Absolutely, you can set the `minUsers` and `maxUsers` props to fit anything from a small boutique to a massive enterprise scale.