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.
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.
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.
📌 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.
Lera
