Signature
Import
About this widget
ThenumericMenu
widget displays a list of numeric filters in a list.
Those numeric filters are pre-configured when creating the widget.
Requirements
The value provided to theattribute
option must be an attribute which is a number in the index, not a string.
Examples
JavaScript
Options
The CSS Selector or
HTMLElement
to insert the widget into.The name of the attribute in the record.
JavaScript
A list of all the options to display, with:
label: string
. Label of the option.start: number
. The option must be greater than or equal tostart
(lower bound).end: number
. The option must be smaller than or equal toend
(upper bound).
JavaScript
The CSS classes you can override:
root
. The root element of the widget.noRefinementRoot
. Container class without results.list
. The list of results.item
. The list items.selectedItem
. The selected item in the list.label
. The label of each item.labelText
. The text element of each item.radio
. The radio button of each item.
JavaScript
A function that receives the list of items before they are displayed.
It should return a new array with the same structure.
Use this to transform, filter, or reorder the items.The function also has access to the full
results
data,
including all standard response parameters
and parameters from the helper,
such as disjunctiveFacetsRefinements
.JavaScript
Templates
You can customize parts of a widget’s UI using the Templates API. Each template includes anhtml
function,
which you can use as a tagged template.
This function safely renders templates as HTML strings and works directly in the browser—no build step required.
For details, see Templating your UI.
The
html
function is available in InstantSearch.js version 4.46.0 or later.The template for each item. It exposes:
attribute: string
. The name of the attribute.label: string
. The label for the option.value: string
. The encoded URL of the bounds object with a{start, end}
form. This value can be used verbatim in the webpage and can be read byrefine
directly. If you want to inspect the value, you can doJSON.parse(window.decodeURI(value))
to get the object.isRefined: boolean
. Whether the refinement is selected.url: string
. The URL with the applied refinement.cssClasses: object
. The CSS classes provided to the widget.
HTML output
HTML
Customize the UI with connectNumericMenu
If you want to create your own UI of the numericMenu
widget, you can use connectors.
To use connectNumericMenu
, you can import it with the declaration relevant to how you installed InstantSearch.js.
JavaScript
Create a render function
This rendering function is called before the first search (init
lifecycle step)
and each time results come back from Algolia (render
lifecycle step).
JavaScript
Rendering options
The list of available options, with each option:
label: string
. The label for the option.value: string
. The encoded URL of the bounds object with the{start, end}
form. This value can be used verbatim in the webpage and can be read byrefine
directly. If you want to inspect the value, you can doJSON.parse(window.decodeURI(value))
to get the object.isRefined: boolean
. Whether the refinement is selected.
JavaScript
Whether the search can be refined.
This is
true
if there are results or if a range other than “All” is selected.JavaScript
Sets the selected value and triggers a new search.
JavaScript
The function to send
click
events.
The click
event is automatically sent when refine
is called.
To learn more, see the insights
middleware.eventType: 'click'
facetValue: string
JavaScript
Generates a URL for the next state.
JavaScript
All original widget options forwarded to the render function.
JavaScript
Create and instantiate the custom widget
First, create your custom widgets using a rendering function. Then, instantiate them with parameters. There are two kinds of parameters you can pass:- Instance parameters. Predefined options that configure Algolia’s behavior.
- Custom parameters. Parameters you define to make the widget reusable and adaptable.
renderFunction
, both instance and custom parameters are accessible through connector.widgetParams
.
JavaScript
Instance options
The name of the attribute in the record.
JavaScript
A list of all the options to display, with:
label: string
. Label of the option.start: string
. The option must be greater than or equal tostart
(lower bound).end: string
. The option must be smaller than or equal toend
(upper bound).
JavaScript
JavaScript