Widgets NumericMenu


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


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


type: string 

the name of the attribute in the records

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

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

type: string 

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

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


The label of the largest range added automatically by react instantsearch