Refine a dataset using a numeric range in Instantsearch JS with the Range Input widget
The range input is a simple but useful widget that allows a user filter the results by selecting a numeric range with a minimum and maximum input. In an e-commerce website for instance, this widget would be useful to limit the results where the price is comprised between $X and $Y.
Instructor: [00:00] Let's add a range input widget to refine results between two numeric values. Here, we'll use it for the price attribute. Adding the container on the index page first, in the left column, below categories, we add a div with an ID of price.
[00:16] Then, in the app.js file, search.addWidget, instantsearch.widgets, then rangeInput. We specify the container, price, and the attribute name, price again. Reloading the page, we already have a fully functioning rangeInput widget.
[00:37] If typing 300 in the upper boundary and hitting "Go," the results are now refreshed. The cool thing is that it also works the other way around. When another filter is active, then the placeholder of the two range inputs are refreshed to guide the users.
[00:54] Here, filtering on Apple, we don't have from 1 to 5,000, but from 9 to 4,000. We need to add a header template to complete the setup of this widget, so templates, header, and price. Looks better.
[01:12] Another option available for this widget is to customize the labels of the button and of the text in between inputs. Let's sweep the button label. The key is labels, then submit. Let's change the default "Go" to "Filter." There we go.
[01:28] A couple of other useful options are the min and max to restrict the range. Let's try min and add it, 200. Now, let's add max. Now, those results will be forced to have a price between 200 and 400. The user will only be able to refine further between those boundaries. For our project, we'll only keep the default settings. Let's remove those.