Hey friends - I’m integrating a range input widget in my vanilla JS v3 InstantSearch app and am trying to figure out the best way to mimic the default min/max UX.
The goal: Allow a user to enter anything in the rangeInput fields, and do so while showing no currentRefinements for an empty initial search.
As far as I can tell, when using the default min/max (e.g. nothing entered in the rangeInput widget settings), there is no refinement, and thus, nothing appears in currentRefinements and the UI remains clean. The widget receives the min/max from the initial call and creates the html input min/max attributes from there.
The problem I’m having is the nature of my index causes the default min/max provided by the Algolia engine to be unusable (more on this below). If I enter a min/max in the rangeInput widget settings to override the defaults, that approach causes a refinement, creating an addition to the currentRefinements widget. It’s this last part I’m trying to overcome, e.g. allow a user to basically enter anything in the rangeInput widget, without showing any currentRefinements on the initial search.
Here’s a repro of the root issue (i.e. unusable default min/max) using the default InstantSearch CodeSandbox but with the additions of rangeInput and currentRefinements widgets (still using default
The Algolia engine provides a min/max of 14/100. But say I’m a college student with a $2,000 budget for a new laptop. I can’t enter 2000 as the max in the rangeInput widget as it’s limited by the HTML max attribute of 100.
So fine. I add new defaults for min/max in the rangeInput widget using the
max options. Let’s say, 1 and 9999 to be generous. Now the currentRefinement widget shows an entry even on an empty initial search. From a UX standpoint, this seems confusing as the visitor has not yet added any refinements.
Here are all the solutions I’ve explored:
- Use min/max defaults in rangeInput settings
- Issue: Unable to enter a max over 100 (the value provided by the Algolia engine) as per repro
- Set min/max in rangeInput widget settings
- Issue: Results in currentRefinement
- Override html input min/max attribute in
search.onceevent via removeAttribute/setAttribute/etc (included in repro but commented out)
- Issue: Doesn’t actually refine the search unless value is w/in original range (e.g. 14 min 100 max)
pricefrom currentRefinement widget via the
- Works, but degrades UX for when range input IS used (e.g. won’t show a refinement when a visitor DOES refine by price)
- Set min/max in rangeInput widget settings, but clear the initial currentRefinement in a custom routing function
- Issue: Seems like a hack?
Perhaps I need to use the connector to create a fully custom rangeInput widget, but this feels like I’m missing something simple, so any and all suggestions are most welcome!