12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
11 : 17 : 37 : 22
Become a member
to unlock all features

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

    Raphael TerrierRaphael Terrier

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: 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.

    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.

    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.

    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.

    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.

    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.