Range slider
What you're building: a draggable two-handle slider that filters a numeric field, rather than two number inputs.
WF-Algolia provides the range filter. It does not ship a slider UI — Webflow has no native one, and Finsweet's is already in most projects. The two connect through the range filter's min and max inputs.
What you need
- Applies toA Div inside the browse wrapper
The range group.
- Applies toThe group
The numeric field to filter.
- Applies toAn input inside the group
Lower bound.
- Applies toAn input inside the group
Upper bound.
How it fits together
The range filter reads its bounds from the two inputs. Finsweet's slider writes its handle positions into inputs. Point the slider at the same two inputs the range filter is watching, and dragging a handle updates the filter.
<div wf-algolia-element="filter-group" wf-algolia-field="price">
<input wf-algolia-element="range-min" />
<input wf-algolia-element="range-max" />
</div>
Add to show the current bounds as text.
A price stored as "49.99" rather than 49.99 will never match a range filter,
however the slider is configured. Fix it at index time — no attribute can
compare strings numerically.
Without a slider
The range filter works perfectly well with two plain number inputs, and needs no third-party library. Add the slider only when the drag interaction is worth the dependency.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Dragging changes nothing | The slider writes to different inputs than the filter reads | Point both at the same inputs |
| The range never filters | The Algolia field is a string | Re-index it as a number |
| Bounds reset on every render | The slider re-initialises after results render | Re-bind it on the results event |
| The display never updates | No range-display element | Add one |