RangeInput | React InstantSearch V6 (Deprecated)

This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.

Signature

<RangeInput
  attribute={string}
  // Optional parameters
  defaultRefinement={object}
  min={number}
  max={number}
  precision={number}
  translations={object}
/>

About this widget

The RangeInput allows a user to select a numeric range using a minimum and maximum input.

Requirements

The attribute provided to the widget must be in attributes for faceting, either on the dashboard) or using attributesForFaceting with the API. The values inside the attribute must be numbers, not strings.

Examples

1
2
3
import { RangeInput } from 'react-instantsearch-dom';

<RangeInput attribute="price" />

Props

attribute

The name of the attribute in the record.

1
<RangeInput attribute="price" />

defaultRefinement

The default state of the widget containing the min and the max of the range.

1
2
3
4
<RangeInput
  // ...
  defaultRefinement={{ min: 10, max: 500 }}
/>

min

The minimum value for the input. When not provided, the minimum value is automatically computed by Algolia from the data in the index.

1
2
3
4
<RangeInput
  // ...
  min={10}
/>

max

The maximum value for the input. When not provided, the maximum value is automatically computed by Algolia from the data in the index.

1
2
3
4
<RangeInput
  // ...
  max={500}
/>

precision

The number of digits after the decimal point to use.

1
2
3
4
<RangeInput
  // ...
  precision={2}
/>

translations

A mapping of keys to translation values.

• submit: the label of the submit button.
• separator: the label of the separator.

1
2
3
4
5
6
7
<RangeInput
  // ...
  translations={{
    submit: 'ok',
    separator: 'to',
  }}
/>