Dynamic Slider
Dynamic slider pricing section with smooth transitions.
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. |
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
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.
FAQ
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.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.