Signature
Import
- Component
- Plugin
To ensure optimal bundle sizes,
see Optimize build size.
Vue
About this widget
Theais-range-input
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
Vue
Props
The name of the attribute in the record.
Vue
The minimum value for the input.
When not provided, the minimum value is automatically computed by Algolia from the data in the index.
Vue
The maximum value for the input.
When not provided, the maximum value is automatically computed by Algolia from the data in the index.
Vue
The number of digits after the decimal point to use.
Vue
The CSS classes you can override:
ais-RangeInput
. The root of the widget.ais-RangeInput--noRefinement
. The root of the widget without refinement.ais-RangeInput-form
. The form wrapper around the inputs and the submit button.ais-RangeInput-separator
. The separator between the min and the max.ais-RangeInput-button
. The button that triggers the submission of the form.ais-RangeInput-label
. The enclosing label of an input.ais-RangeInput-input
. The inputs.ais-RangeInput-input--min
. The input for the minimum value.ais-RangeInput-input--max
. The input for the maximum value.
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
-
currentRefinement: { min: number, max: number }
. A value that contains the currently applied refinement. -
range: { min: number, max: number }
. A value that contains the minimum and maximum available value. -
canRefine: boolean
. Whether the refinement can be applied. -
refine: ({ min: number, max: number }) => void
. A function to select the 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
Vue
minLabel
The slot to override the DOM output for the label of the minimum value.
Vue
maxLabel
The slot to override the DOM output for the label of the maximum value.
Vue
submitLabel
The slot to override the DOM output for the label of the submit button.
Vue
separator
The slot to override the DOM output for the separator beteween the inputs.
Vue
HTML output
HTML