The numeric menu is a widget that displays a list of numeric filters in a list. Those numeric filters are pre-configured with creating the widget.
The attribute passed to attribute
must be declared as an attribute for faceting in your
Algolia settings.
The values inside this attribute must be JavaScript numbers and not strings.
You can find an example at the end of the page or a live example in our widget showcase.
const search = instantsearch( /* parameters */ );
const widget = instantsearch.widgets.numericMenu({
container: string|HTMLElement,
attribute: string,
items: Array<NumericMenuOption>,
templates: [NumericMenuTemplates],
cssClasses: [NumericMenuCSSClasses],
transformItems: [(Array<object>) => Array<object>],
}: NumericMenuWidgetOptions);
search.addWidget(widget);
string|HTMLElement
CSS Selector or HTMLElement to insert the widget.
string
Name of the attribute for filtering.
Array<NumericMenuOption>
List of all the items.
[NumericMenuTemplates]
Templates to use for the widget.
[NumericMenuCSSClasses]
CSS classes to add to the wrapping elements.
[(Array<object>) => Array<object>]
Function to transform the items passed to the templates.
string
Name of the option.
number
Lower bound of the option (>=).
number
Higher bound of the option (<=).
[string|function]
Item template, provided with label
(the name in the configuration), isRefined
, url
, value
(the setting for the filter) data properties.
[string|Array<string>]
CSS class to add to the root element.
[string|Array<string>]
CSS class to add to the root element when no refinements.
[string|Array<string>]
CSS class to add to the list element.
[string|Array<string>]
CSS class to add to each item element.
[string|Array<string>]
CSS class to add to each selected item element.
[string|Array<string>]
CSS class to add to each label element.
[string|Array<string>]
CSS class to add to each label text element.
[string|Array<string>]
CSS class to add to each radio element (when using the default template).
[function]
Called after each search response has been received
[function]
Let the widget update the configuration of the search with new parameters
[function]
Called once before the first search
search.addWidget(
instantsearch.widgets.numericMenu({
container: '#popularity',
attribute: 'popularity',
items: [
{ label: 'All' },
{ end: 500, label: 'less than 500' },
{ start: 500, end: 2000, label: 'between 500 and 2000' },
{ start: 2000, label: 'more than 2000' }
]
})
);
Can't find what you are looking for? Open an issue, we'll get back to you.