Skip to main content
The rangeSlider widget provides a visual slider interface for filtering results by numeric ranges. It offers a more user-friendly alternative to range inputs for selecting ranges.

​
Usage

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

search.addWidget(rangeSlider);

​
Examples

​
Basic Range Slider

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

​
With Custom Min/Max

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

​
With Custom Step

instantsearch.widgets.rangeSlider({
  container: '#price',
  attribute: 'price',
  step: 10,
});

​
With Custom Tooltips

instantsearch.widgets.rangeSlider({
  container: '#price',
  attribute: 'price',
  tooltips: {
    format(value) {
      return `$${Math.round(value).toLocaleString()}`;
    },
  },
});

​
Without Pips

instantsearch.widgets.rangeSlider({
  container: '#price',
  attribute: 'price',
  pips: false,
});

​
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 slider. By default, automatically computed from the result set.
​
max
number
Maximum value for the slider. By default, automatically computed from the result set.
​
precision
number
default:"0"
Number of digits after the decimal point.
​
step
number
default:"1"
Number of units to jump when moving the handle. Useful for creating discrete steps.
​
pips
boolean
default:"true"
Whether to show pips (value markers) along the slider.
​
tooltips
boolean | object
default:"true"
Whether to show tooltips displaying current values.When passing an object:
{
  format: (value: number) => string
}
​
cssClasses
object
CSS classes to add to the widget elements.

​
HTML Output

<div class="ais-RangeSlider">
  <div class="rheostat">
    <!-- Slider implementation -->
  </div>
</div>
The rangeSlider widget uses the rheostat library internally for the slider functionality.

​
Styling the Slider

You can customize the slider appearance using CSS: 
.ais-RangeSlider .rheostat-background {
  background-color: #e9e9e9;
  height: 6px;
}

.ais-RangeSlider .rheostat-progress {
  background-color: #3a96cf;
}

.ais-RangeSlider .rheostat-handle {
  background-color: #fff;
  border: 2px solid #3a96cf;
  width: 20px;
  height: 20px;
}

​
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