---
title: "CMS PriceRangeSlider — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Lera · Sections. Auto-detect & filter your CMS by price."
canonical: "https://framer.elliotli.dev/component/cms-pricerangeslider"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/CMS PriceRangeSlider

# CMS PriceRangeSlider

Auto-detect & filter your CMS.

[View on Framer](https://framer.com/marketplace/components/cms-pricerangeslider/?via=elliot-li)

![CMS PriceRangeSlider preview image 1](https://framer.elliotli.dev/og/component/cms-pricerangeslider/09d2b4308a4faab2/1600x1200.jpg)

## Summary

Auto-detect & filter your CMS by price.

## Description

## 🛠️ How to use the Price Range Slider component 🛠️

1.  Create a new stack & place your **CMS collection** inside, **name them the same way**;
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u3m5btqk-oLbGhKMF7ei8JErq0cMEkVGu4E7gmK)
2.  Connect CMS **items' properties** with **CMS fields** (E.g., Title -> Title, Price -> Price, Image -> Image, etc.)
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u3m5btqk-t2F1U6H3xgG1J3O0W2KEcnuONIPm7f)
3.  Drag & drop Price Range Slider **in the same stack** as your CMS collection; **Done!** Slider reads the prices - including discounted/sale prices, sets the range, & filters items as needed.
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u3m5btqk-AHjq3B73RvNtRjEptRJlzPSES5ldjN)

## Features

### 💫 What you can customize 💫

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u3m5btqk-R2sNNKwbEBYfWPeexq531BjyRHdckx)

-   The price **tooltip** above each handle;
    
-   **Reset Button**;
    
-   **Count** feature shows "X from Y" items after filtering;
    
-   Show/hide **all three properties** from above with their own separate toggles;
    
-   Choose from up to **20 different currency** symbols;
    
-   Control **handles diameter** sizes (**Touch target** always stays the same 44px);
    
-   **Gap Slider**/**Gap Inputs** to control spacing between slider & inputs/ spacing between inputs themselves;
    
-   Full control over **typography** & **colors.**
    

### ⌨️ Keyboard controls ⌨️

-   Control price value with **arrows up/down** -> +1/-1 to value;
    
-   Hold **Shift & use arrows** to jump by +10/-10;
    
-   **Tab** to either handle, arrows to nudge.
    

### ☝ Important to know ☝

📌 The Price Range Slider **does not work without CMS collection** on the canvas. As you add CMS collection & connect its fields with items on canvas - drag & drop the Price Range Slider **in the same stack as the CMS collection**.

📌 With **more than one CMS** collection **per page,** place each CMS collection with its own Price Range Slider component in a shared parent stack. **Name layers properly**.

📌 **One Price Range Slider** filters items from **only one CMS** collection that it shares a **parent stack** with.

📌 **Screen readers** announce min/max values and the filtered count.

📌 Component **respects prefers-reduced-motion**, disables handle scale/transition animations for users who've opted out.

## Rank history [How rankings work →](/terms#rankings)

-   All · #762

## Details

- **Author**: Lera
- **Price**: $4.00
- **Published**: 2026-06-01
- **Updated**: 2026-10-28
- **Added**: 2026-05-21
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove