Skip to main content
The <RangeInput> component provides input fields to filter results by a numeric range.

​
Import

import { RangeInput } from 'react-instantsearch';

​
Props

​
attribute
string
required
The numeric attribute to filter.
<RangeInput attribute="price" />
​
min
number
Minimum value for the range. By default, it’s automatically computed from the results.
<RangeInput attribute="price" min={0} />
​
max
number
Maximum value for the range. By default, it’s automatically computed from the results.
<RangeInput attribute="price" max={1000} />
​
precision
number
default:"0"
Number of decimal places for the values.
<RangeInput attribute="price" precision={2} />
​
translations
object
Customize the text strings.
<RangeInput
  attribute="price"
  translations={{
    separatorElementText: 'to',
    submitButtonText: 'Go',
  }}
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, RangeInput, Hits } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <div className="filters">
        <h3>Price</h3>
        <RangeInput attribute="price" />
      </div>
      <Hits />
    </InstantSearch>
  );
}

​
With Custom Bounds

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <RangeInput
        attribute="price"
        min={0}
        max={1000}
        precision={2}
      />
      <Hits />
    </InstantSearch>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us