CMS PriceRangeSlider

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

1. Create a new stack & place your CMS collection inside, name them the same way;

   

2. Connect CMS items' properties with CMS fields (E.g., Title -> Title, Price -> Price, Image -> Image, etc.)

   

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.

   

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.