Uilora
Uilora.
Uilora
Uilora.
Content Blocks
Playground

Dynamic Slider

Dynamic slider pricing section with smooth transitions.

pricingsliderdynamictransitions

Props

Customize the component with these props

PropertyTypeDefaultDescription
title
stringScale as you growSection title text.
subtitle
stringPay 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
number1Minimum number of users.
maxUsers
number50Maximum number of users.
defaultUsers
number5Default number of users.
pricePerUser
number12Price per user.
backgroundColor
string#f8fafcBackground color (hex, rgb, or hsl).
cardBgColor
string#ffffffCard background color.
cardShadowColor
stringrgba(0,0,0,0.1)Card shadow color.
titleColor
string#0f172aTitle text color.
subtitleColor
string#64748bSubtitle text color.
labelColor
string#94a3b8Label text color.
userCountColor
string#2563ebUser count text color.
totalColor
string#0f172aTotal price text color.
sliderBgColor
string#f1f5f9Slider background color.
sliderFillColor
string#2563ebSlider fill color.
sliderHandleBgColor
string#ffffffSlider handle background color.
sliderHandleBorderColor
string#2563ebSlider handle border color.
sliderIconColor
string#2563ebSlider icon color.
tierActiveBorderColor
string#2563ebActive tier border color.
tierActiveBgColor
string#eff6ffActive tier background color.
tierInactiveBorderColor
string#f1f5f9Inactive tier border color.
tierTitleColor
string#0f172aTier title text color.
tierDescColor
string#64748bTier description text color.
tierFeatureTextColor
string#0f172aTier feature text color.
tierFeatureCheckColor
string#2563ebTier feature check color.
buttonBgColor
string#2563ebButton background color.
buttonTextColor
string#ffffffButton text color.
buttonText
stringGet StartedButton text.
Dynamic Slider - Content Blocks Component | UILora