Widgets RangeInput

Description

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

Requirements

The attribute passed to the attribute prop must be present in “attributes for faceting” on the Algolia dashboard or configured as attributesForFaceting via a set settings call to the Algolia API. The values inside the attribute must be JavaScript numbers (not strings).

Props

attribute*
type: string 

the name of the attribute in the record

defaultRefinement
type: {min: number, max: number} 

Default state of the widget containing the start and the end of the range.

min
type: number 

Minimum value. When this isn’t set, the minimum value will be automatically computed by Algolia using the data in the index.

max
type: number 

Maximum value. When this isn’t set, the maximum value will be automatically computed by Algolia using the data in the index.

precision
type: numberdefault: 0

Number of digits after decimal point to use.

Example usage

import React from 'react'; import { InstantSearch, RangeInput } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <RangeInput attribute="price" /> </InstantSearch> );

CSS classes

.ais-RangeInput {}

the root div of the widget

.ais-RangeInput-form {}

the wrapping form

.ais-RangeInput-label {}

the label wrapping inputs

.ais-RangeInput-input {}

the input (number)

.ais-RangeInput-input--min {}

the minimum input

.ais-RangeInput-input--max {}

the maximum input

.ais-RangeInput-separator {}

the separator word used between the two inputs

.ais-RangeInput-button {}

the submit button

Translation keys

submit

Label value for the submit button

separator

Label value for the input separator