Skip to main content
The rangeInput widget allows users to filter results by entering minimum and maximum values for a numeric attribute. It’s ideal for price ranges, ratings, or any numeric filtering.

​
Usage

const rangeInput = instantsearch.widgets.rangeInput({
  container: '#price-range',
  attribute: 'price',
});

search.addWidget(rangeInput);

​
Examples

​
Basic Range Input

instantsearch.widgets.rangeInput({
  container: '#price',
  attribute: 'price',
});

​
With Custom Min/Max

instantsearch.widgets.rangeInput({
  container: '#price',
  attribute: 'price',
  min: 0,
  max: 1000,
});

​
With Decimal Precision

instantsearch.widgets.rangeInput({
  container: '#rating',
  attribute: 'rating',
  min: 0,
  max: 5,
  precision: 1,
});

​
With Custom Templates

instantsearch.widgets.rangeInput({
  container: '#price',
  attribute: 'price',
  templates: {
    separatorText: '→',
    submitText: 'Filter',
  },
});

​
Options

​
container
string | HTMLElement
required
CSS Selector or HTMLElement to insert the widget.
​
attribute
string
required
The name of the numeric attribute to filter on. Must be declared as an attribute for faceting.
​
min
number
Minimum value for the range. By default, automatically computed from the result set.
​
max
number
Maximum value for the range. By default, automatically computed from the result set.
​
precision
number
default:"0"
Number of digits after the decimal point. Set to 1 for one decimal place, 2 for two, etc.
​
templates
object
Templates to customize the widget rendering.
​
cssClasses
object
CSS classes to add to the widget elements.

​
HTML Output

<div class="ais-RangeInput">
  <form class="ais-RangeInput-form">
    <label class="ais-RangeInput-label">
      <input
        class="ais-RangeInput-input ais-RangeInput-input--min"
        type="number"
        min="0"
        max="1000"
        step="1"
        placeholder="0"
      />
    </label>
    <span class="ais-RangeInput-separator">to</span>
    <label class="ais-RangeInput-label">
      <input
        class="ais-RangeInput-input ais-RangeInput-input--max"
        type="number"
        min="0"
        max="1000"
        step="1"
        placeholder="1000"
      />
    </label>
    <button class="ais-RangeInput-submit" type="submit">Go</button>
  </form>
</div>

​
Requirements

The attribute must be declared as an attribute for faceting in your Algolia index settings.The values must be JavaScript numbers (not strings).

Build docs developers (and LLMs) love

Get started for freeTalk to us