The Framer Designer's Dilemma
Spending hours creating D1, D2, D3 variants and complex conditional visibility rules just to add basic filtering? There's a better way.
Range Slider Filters for Price and Number Ranges
Enable users to filter by price ranges, ratings, quantities, or any numeric CMS field with beautiful dual-thumb range sliders.
- Dual-thumb sliders for min/max range selection
- Perfect for price, rating, quantity filtering
- Real-time value display and filtering
- Customizable min/max bounds and step values
- Touch-friendly mobile interaction
Range Slider Configuration
Set up price and number range filtering
Get CMS Range Slider Working in 3 minutes
Add intuitive range filtering for any numeric CMS field. Perfect for price ranges, ratings, quantities, or any scenario where users need to filter by numeric ranges.
Identify Numeric Fields
Find numeric CMS fields that would benefit from range filtering, such as price, rating, quantity, or age.
Pro Tips
- •Works best with fields that have wide numeric ranges
- •Consider user behavior - do they think in ranges for this field?
Add Range Slider Component
Drag CMS Range Slider from assets and position it with your other filter controls.
Pro Tips
- •Range sliders need more horizontal space than other filters
- •Consider dedicated sections for range controls
Configure Range Parameters
Set the field name, min/max bounds, step values, and display units.
Framer Property Panel
fieldName: 'Price' min: 0 max: 1000 step: 25 unit: '$' defaultRange: [100, 500] showValues: true
Pro Tips
- •Set realistic min/max based on your actual data range
- •Choose step values that make sense for your use case
- •Consider starting with a reasonable default range
Style and Test
Customize colors, size, and labels to match your design system and test the filtering behavior.
Pro Tips
- •Use brand colors for the active range indicator
- •Test on mobile devices for touch interaction
- •Ensure values update clearly as users drag
Setup Complete!
Your CMS Range Slider is now ready. Test it in preview mode to ensure everything works correctly.
CMS Range Slider Setup Walkthrough
Watch the complete setup process step-by-step
CMS Range Slider Configuration Panel
Property controls and settings overview
Real-World Use Cases for CMS Range Slider
See how CMS Range Slider solves common filtering challenges across different industries and project types.
E-commerce Price Filtering
Let customers set budget ranges for product searches
Scenario:
Shoppers want to find products within their budget without seeing items they can't afford or browsing through irrelevant price points.
Solution with CMS Range Slider:
Range slider for price field allows customers to set their budget range and see only products within that range.
Key Benefits:
- Higher conversion by showing affordable options
- Reduced cart abandonment from price shock
- Better user experience with relevant results
- Increased average order value in chosen range
Real Estate Property Filtering
Filter properties by price range, square footage, or lot size
Scenario:
Home buyers have specific budget and size requirements and need to filter properties by price range and square footage.
Solution with CMS Range Slider:
Multiple range sliders for price, square footage, bedrooms, and bathrooms provide comprehensive property filtering.
Key Benefits:
- Faster property discovery for buyers
- Higher quality leads with budget alignment
- Reduced time wasted on inappropriate properties
- Better agent-buyer matching
Rating and Review Filtering
Filter products or services by rating ranges
Scenario:
Customers want to see only highly-rated products or compare items within specific rating ranges for decision making.
Solution with CMS Range Slider:
Range slider on rating field lets users filter to show only 4-5 star products or compare within specific rating bands.
Key Benefits:
- Increased confidence in product quality
- Faster decision making with pre-filtered quality
- Higher satisfaction with purchase decisions
- Reduced returns from quality mismatches
Ready to implement CMS Range Slider in your project?
Join thousands of Framer designers who've ditched complex workarounds for real filtering solutions.
Live CMS Range Slider Demo
Try CMS Range Slider in action with real CMS data. See exactly how it works before you implement it.
CMS Range Slider Interactive Demo
See how CMS Range Slider filters CMS content in real-time
CMS Range Slider in E-commerce Store
Product filtering with CMS Range Slider
CMS Range Slider in Portfolio Site
Project filtering with CMS Range Slider
Complete Your Filtering Setup
CMS Range Slider works best when combined with other CMS Filter components. Build a complete filtering experience.
CMS Filters
Combine range sliders with other filter types
Works with CMS Range Slider:
Use range sliders within the Filter Builder alongside dropdowns, checkboxes, and other filter types.
CMS Count
Show how many items match the selected range
Works with CMS Range Slider:
Display result count that updates as users adjust the range slider.
CMS Facets
Display selected range as a removable chip
Works with CMS Range Slider:
Show current range selection as 'Price: $200-$800' chip that users can remove.
Get All Components Together
Save time and get the complete CMS Filter suite. All components work seamlessly together for the ultimate filtering experience.
Framer CMS Filter Pricing
Lock in founder pricing. First 20 licenses at $59 - prices rise as slots fill.
Personal
$59$79First 20 licenses only · Then $59 → $79
Features included:
- 1 Site
- All filter components
- Remix 2 demo projects
- Lifetime v1.x updates
- Email support
Agency
$149$199First 20 licenses only · Then $149 → $199
Everything in Personal, plus:
- Unlimited Sites
- All filter components
- Remix 2 demo projects
- Quick Feature Requests
- Lifetime v1.x updates
- Priority support
Creator
$199$249First 20 licenses only · Then $199 → $249
Everything in Agency, plus:
- Template distribution rights
- All filter components
- Sell in marketplaces
- Quick Feature Requests
- Lifetime v1.x updates
- Priority support
Founder launch: first 20 licenses $59 (Personal) & $149 (Agency) & $199 (Creator) · Prices rise as slots fill
Frequently Asked Questions
Common questions about CMS Range Slider setup, configuration, and usage.