Signature
Import
About this widget
TherangeInput
widget allows a user to select a numeric range using a minimum and maximum input.
Requirements
Theattribute
provided to the widget must be in attributes for faceting,
either on the dashboard
or using the attributesForFaceting
parameter with the API.
The values of the attribute must be numbers, not strings.
Examples
JavaScript
Options
The CSS Selector or
HTMLElement
to insert the widget into.The name of the attribute in the record.
JavaScript
The minimum value for the input. When not provided, the minimum value is automatically computed by Algolia from the data in the index.
JavaScript
The maximum value for the input.
When not provided, the maximum value is automatically computed by Algolia from the data in the index.
JavaScript
The number of digits after the decimal point to use.
JavaScript
The CSS classes you can override:
root
. The root element of the widget.form
. The form element.label
. The label elements.input
. The input elements.inputMin
. The minimum input element.inputMax
. The maximum input element.separator
. The separator element.submit
. The submit button.
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 the separator, between the minimum and maximum inputs.
The template for the submit button.
HTML output
HTML
Customize the UI with connectRange
If you want to create your own UI of the rangeInput
widget, you can use connectors.
This connector is also used to build the
rangeSlider
widget.connectRange
, 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 current value for the refinement, with
start[0]
as the minimum value and start[1]
as the maximum value.JavaScript
The current available value for the range.
JavaScript
Indicates if search state can be refined.
JavaScript
Sets a range to filter the results on.
Both values are optional,
and default to the higher and lower bounds.
You can use
undefined
to remove a previously set bound or to set an infinite bound.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
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
The minimum value for the input.
When not provided, the minimum value is automatically computed by Algolia from the data in the index.
JavaScript
The maximum value for the input.
When not provided, the maximum value is automatically computed by Algolia from the data in the index.
JavaScript
The number of digits after the decimal point to use.
JavaScript