Comparison filters
What you're building: a filter with one bound rather than two — "under £50", "4 stars and up", "in stock".
A range filter with only one side filled in. Presented as a choice rather than as inputs, it reads as a normal filter list.
What you need
- Applies toA Div inside the browse wrapper
The group.
- Applies toThe group
The numeric field to compare.
- Applies toThe group
Comparison is a one-sided range.
- Applies toAn input inside the group
The bound. Omit range-max for "and above".
One bound, not two
Include only the side you want:
<!-- 4 stars and above -->
<div wf-algolia-element="filter-group" wf-algolia-field="rating" wf-algolia-type="range">
<input type="hidden" wf-algolia-element="range-min" value="4" />
</div>
Omitting range-max leaves the upper bound open.
Presenting it as buttons
For a "4 and up / 3 and up / 2 and up" list, use one group per option with a
hidden range-min carrying the threshold, and style the buttons as a normal
filter list.
Same numeric requirement as any range
The field must be stored as a number in Algolia. A rating indexed as "4" will
never compare — see Range filters.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Nothing filters | The field is a string in Algolia | Re-index as a number |
| Both bounds apply | A range-max is present | Remove it for one-sided |
| The button never appears active | No active class configured | Set data-activeclass or style is-active |