API Reference / React InstantSearch / RangeInput

RangeInput

A
Signature 
<RangeInput
  attribute={string}
  // Optional parameters
  defaultRefinement={object}
  min={number}
  max={number}
  precision={number}
  translations={object}
/>
See code examples
See live example

About this widget # A

We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.

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 # A

Copy 
1
2
3

import { RangeInput } from 'react-instantsearch-dom';

<RangeInput attribute="price" />

Props # A

attribute #
type: string
Required

The name of the attribute in the record.
Copy 
1

<RangeInput attribute="price" />
defaultRefinement #
type: object
Optional

The default state of the widget containing the min and/or the max of the range.
Copy 
1
2
3
4

<RangeInput
  // ...
  defaultRefinement={{ min: 10, max: 500 }}
/>
min #
type: number
Optional

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

<RangeInput
  // ...
  min={10}
/>
max #
type: number
Optional

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

<RangeInput
  // ...
  max={500}
/>
precision #
type: number
default: 0
Optional

The number of digits after the decimal point to use.
Copy 
1
2
3
4

<RangeInput
  // ...
  precision={2}
/>
translations #
type: object
Optional

A mapping of keys to translation values.

  • submit: the label of the submit button.
  • separator: the label of the separator.
Copy 
1
2
3
4
5
6
7

<RangeInput
  // ...
  translations={{
    submit: 'ok',
    separator: 'to',
  }}
/>

HTML output# A

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<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"
        placeholder=""
        step="1"
      />
    </label>
    <span class="ais-RangeInput-separator">to</span>
    <label class="ais-RangeInput-label">
      <input
        class="ais-RangeInput-input ais-RangeInput-input--max"
        type="number"
        placeholder=""
        step="1"
      />
    </label>
    <button class="ais-RangeInput-submit" type="submit">ok</button>
  </form>
</div>

Customize the UI with connectRange# A

If you want to create your own UI of the RangeInput widget or use another UI library, you can use connectors.

Connectors are higher-order components. They encapsulate the logic for a specific kind of widget and they provide a way to interact with the InstantSearch context.

They have an outer component API that we call exposed props, and they provide some other props to the wrapped components which are called the provided props.

This connector is also used to build other widgets: RangeSlider RatingMenu

It’s a 3-step process:

// 1. Create a React component
const RangeInput = () => {
  // return the DOM output
};

// 2. Connect the component using the connector
const CustomRangeInput = connectRange(RangeInput);

// 3. Use your connected widget
<CustomRangeInput />

See code examples

Create a React component#

const RangeInput = ({
  object currentRefinement,
  number min,
  number max,
  number precision,
  function refine,
  function createURL,
}) => {
  // return the DOM output
};

Provided Props#

currentRefinement #
type: object

The currently applied refinement or the minimum/maximum value.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const RangeInput = ({ currentRefinement }) => (
  <form>
    <input
      type="number"
      placeholder="Min"
      defaultValue={currentRefinement.min}
    />
    {' - '}
    <input
      type="number"
      placeholder="Max"
      defaultValue={currentRefinement.max}
    />
  </form>
);
min #
type: number

The minimum available value.
Copy 
1
2
3
4
5

const RangeInput = ({ min }) => (
  <form>
    <input type="number" placeholder={min} />
  </form>
);
max #
type: number

The maximum available value.
Copy 
1
2
3
4
5

const RangeInput = ({ max }) => (
  <form>
    <input type="number" placeholder={max} />
  </form>
);
precision #
type: number

The number of digits after the decimal point to use.
Copy 
1
2
3
4
5

const RangeInput = ({ precision }) => (
  <form>
    <input type="number" step={1 / Math.pow(10, precision)} />
  </form>
);
refine #
type: function

Selects a range.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

const RangeInput = ({ currentRefinement, refine }) => (
  <form>
    <input
      type="number"
      placeholder="Min"
      value={currentRefinement.min || ''}
      onChange={event =>
        refine({
          ...currentRefinement,
          min: event.currentTarget.value,
        })
      }
    />
    {' - '}
    <input
      type="number"
      placeholder="Max"
      value={currentRefinement.max || ''}
      onChange={event =>
        refine({
          ...currentRefinement,
          max: event.currentTarget.value,
        })
      }
    />
  </form>
);
createURL #
type: function

Generates a URL for the corresponding search state.
Copy 
1
2
3

const RangeInput = ({ createURL }) => (
  <a href={createURL({ min: 10, max: 100 })}>10 - 100</a>
);

Create and instantiate your connected widget#

const CustomRangeInput = connectRange(RangeInput);

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

Exposed Props#

attribute #
type: string
Required

The name of the attribute in the record.
Copy 
1

<CustomRangeInput attribute="price" />
defaultRefinement #
type: object
Optional

The default state of the widget containing the min and/or the max of the range.
Copy 
1
2
3
4

<CustomRangeInput
  // ...
  defaultRefinement={{ min: 10, max: 500 }}
/>
min #
type: number
Optional

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

<CustomRangeInput
  // ...
  min={10}
/>
max #
type: number
Optional

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

<CustomRangeInput
  // ...
  max={500}
/>
precision #
type: number
default: 0
Optional

The number of digits after the decimal point to use.
Copy 
1
2
3
4

<CustomRangeInput
  // ...
  precision={2}
/>

Full example#

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import { connectRange } from 'react-instantsearch-dom';

const RangeInput = ({ currentRefinement, min, max, precision, refine }) => (
  <form>
    <input
      type="number"
      min={min}
      max={max}
      step={1 / Math.pow(10, precision)}
      value={currentRefinement.min || ''}
      onChange={event =>
        refine({
          ...currentRefinement,
          min: event.currentTarget.value,
        })
      }
    />
    {' - '}
    <input
      type="number"
      min={min}
      max={max}
      step={1 / Math.pow(10, precision)}
      value={currentRefinement.max || ''}
      onChange={event =>
        refine({
          ...currentRefinement,
          max: event.currentTarget.value,
        })
      }
    />
  </form>
);

const CustomRangeInput = connectRange(RangeInput);
Did you find this page helpful?
React InstantSearch v6