The Range connector provides the logic to build a custom widget that lets users refine results using a numeric range.
Usage
import { connectRange } from 'instantsearch.js/es/connectors';
const customRange = connectRange(
(renderOptions, isFirstRender) => {
const { start, range, refine, widgetParams } = renderOptions;
const { container } = widgetParams;
const [min, max] = start;
container.innerHTML = `
<div>
<input
type="number"
id="min"
value="${min !== -Infinity ? min : range.min}"
min="${range.min}"
max="${range.max}"
/>
<span>to</span>
<input
type="number"
id="max"
value="${max !== Infinity ? max : range.max}"
min="${range.min}"
max="${range.max}"
/>
<button>Apply</button>
</div>
`;
container.querySelector('button').addEventListener('click', () => {
const minValue = parseFloat(container.querySelector('#min').value);
const maxValue = parseFloat(container.querySelector('#max').value);
refine([minValue, maxValue]);
});
}
);
search.addWidgets([
customRange({
container: document.querySelector('#range'),
attribute: 'price',
}),
]);
Connector Options
Name of the attribute for faceting.
Minimal range value, defaults to automatically computed from the result set.
Maximal range value, defaults to automatically computed from the result set.
Number of digits after the decimal point to use.
Render Options
refine
(rangeValue: [number | undefined, number | undefined]) => void
Sets a range to filter the results. Both values are optional and will default to the higher and lower bounds. You can use undefined to remove a previously set bound or to set an infinite bound.
range
{ min: number, max: number }
Maximum range possible for this search.
Current refinement of the search. The first element is the min value, the second is the max value.
format
{ from: (value: number) => string, to: (value: number) => string }
Transform functions for rendering from and/or to values. Both functions take a number as input and should output a string.
Indicates whether this widget can be refined.
Sends an event to the Insights middleware.
The options passed to the connector.