Refine a dataset using a numeric range in Instantsearch JS with the Range Input widget

Raphael Terrier
InstructorRaphael Terrier
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 3 years ago

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.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today