CMS PriceRangeSlider

Auto-detect & filter your CMS by price.

🛠️ How to use the Price Range Slider component 🛠️ Create a new stack & place your CMS collection inside, name them the same way ; Connect CMS items' properties with CMS fields (E.g., Title -> Title, Price -> Price, Image -> Image, etc.) 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. Features 💫 What you can customize 💫 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.

Auto-detect & filter your CMS by price.