Widgets NumericMenu

Description

NumericMenu is a widget used for selecting the range value of a numeric attribute.

Requirements

The attribute passed to the attribute prop must be holding numerical values.

Props

attribute*
type: string 

the name of the attribute in the records

items*
type: {label: string, start: number, end: number}[] 

List of options. With a text label, and upper and lower bounds.

defaultRefinement
type: string 

the value of the item selected by default, follow the format “min:max”.

transformItems
type: function 

Function to modify the items being displayed, e.g. for filtering or sorting them. Takes an items as parameter and expects it back in return.

Example usage

import React from 'react'; import { InstantSearch, NumericMenu } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <NumericMenu attribute="price" items={[ { end: 10, label: '< $10' }, { start: 10, end: 100, label: '$10 - $100' }, { start: 100, end: 500, label: '$100 - $500' }, { start: 500, label: '> $500' }, ]} /> </InstantSearch> );

CSS classes

.ais-NumericMenu {}

the root div of the widget

.ais-NumericMenu--noRefinement {}

the root div of the widget when there is no refinement

.ais-NumericMenu-list {}

the list of all refinement items

.ais-NumericMenu-item {}

the refinement list item

.ais-NumericMenu-item--selected {}

the selected refinement list item

.ais-NumericMenu-label {}

the label of each refinement item

.ais-NumericMenu-radio {}

the radio input of each refinement item

.ais-NumericMenu-labelText {}

the label text of each refinement item

Translation keys

all

The label of the largest range added automatically by react instantsearch