Range filters
What you're building: a numeric filter with a lower and upper bound — price from 20 to 80, year from 2015 to now.
What you need
- Applies toA Div inside the browse wrapper
The group.
- Applies toThe group
The numeric field.
- Applies toThe group
The control style.
- Applies toAn input inside the group
Lower bound.
- Applies toAn input inside the group
Upper bound.
<div wf-algolia-element="filter-group" wf-algolia-field="price" wf-algolia-type="range">
<input type="number" wf-algolia-element="range-min" />
<input type="number" wf-algolia-element="range-max" />
<span wf-algolia-element="range-display"></span>
</div>
A price stored as "49.99" rather than 49.99 will never match. String
comparison is not numeric comparison, and no attribute changes that — fix it when
indexing.
This is the most common reason a range filter appears to do nothing.
Displaying the bounds
renders the current range as text. controls how the numbers are shown — useful for currency or units.
One bound only
Leaving either input empty is valid: min alone means "at least", max alone means "at most". Design the empty state so it does not look broken.
Adding a slider
The two inputs are all the filter needs. To drive them with a draggable control, see Range slider.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Nothing filters | The field is stored as a string | Re-index as a number |
| Only one bound works | The other input is missing its role | Both need range-min / range-max |
| The display never updates | No range-display element | Add one |
| Decimals are ignored | The field is an integer in Algolia | Re-index with the precision you need |