Signature
Import
- Component
- Plugin
To ensure optimal bundle sizes,
see Optimize build size.
Vue
About this widget
Theais-numeric-menu
widget displays a list of numeric filters in a list.
Those numeric filters are pre-configured when creating the widget.
Requirements
The values of the attribute must be numbers, not strings.Examples
Vue
Props
The name of the attribute in the record.
Vue
A list of all the options to display, with:
label: string
. Label of the optionstart: 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).
Vue
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
.Vue
The CSS classes you can override:
ais-NumericMenu
. The root element of the widget.ais-NumericMenu--noRefinement
. The root element of the widget without refinement.ais-NumericMenu-list
. The ranges list.ais-NumericMenu-item
. The ranges list item.ais-NumericMenu-item--selected
. The ranges list selected item.ais-NumericMenu-label
. The label of each item.ais-NumericMenu-radio
. The radio of each item.ais-NumericMenu-labelText
. The text of each item.
Vue
Customize the UI
default
The slot to override the complete DOM output of the widget.When you implement this slot, none of the other slots will change the output, as the default slot surrounds them.Scope
-
items: object[]
. The list of items the widget can display. -
canRefine: boolean
. Whether a refinement can be applied. -
refine: (value: string) => void
. The function to call with the next value of the refinement. -
createURL: (value: string) => void
. The function to generate a URL for the provided refinement. -
sendEvent: (eventType: 'click', facetValue: string) => void
. The function to sendclick
events.- The
view
event is automatically sent when the facets are rendered. - The
click
event is automatically sent whenrefine
is called.
insights
middleware. - The
object
with: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.
Vue
HTML output
HTML