This package comes with multiple ready-to-use slider styles, all inside one component.
Shows minimum, maximum, and current value
Perfect for settings, filters, and controls
Clean and professional UI
You can hide the live value
Useful when you want a minimal or clean design
Ideal for modern UI layouts
Option to hide minimum and maximum numbers
Keeps your design distraction-free
Great for simple sliders
Display min, max, and current value above the slider
Improves readability
Works great for dashboards and forms
Add a custom prefix like:
$
₹
€
Perfect for pricing, budgets, and cost sliders
Example:$200 – $1300
Add a custom suffix like:
M
K
GB
Ideal for:
Financial values
Data size
Metrics
Example:2M – 8M
Style the current value text
Change:
Background color
Text color
Border radius
Make it match your brand perfectly
Fully customizable slider knob
Change:
Size
Color
Shape
Gives a premium and unique look
Different colors for:
Minimum
Progress
Maximum
Adjustable knob size
Best for advanced UI and data visualization
Display slider value in another text layer
Connect the slider with external text using ID
Perfect for:
Pricing cards
Live calculations
Interactive forms
✅ Fully responsive✅ Clean & modern UI✅ Easy to customize✅ No complex setup✅ Works perfectly in Framer✅ Ready for real projects
Whether you’re building:
SaaS websites
Pricing calculators
Dashboards
Landing pages
Finance or analytics tools
This slider fits every use case.
Designers
No-code builders
Startups
SaaS founders
Agencies
Instead of building sliders again and again,👉 Just drag, drop, and customize.
Save time, keep design consistency, and deliver better UX.
If you want a professional, flexible, and advanced range slider for Framer - This is the only slider you need.
💜 Add it to your project and level up your UI instantly!