Overview
The Range Slider Facet component renders a Range Slider Component and number input elements for minimum and maximum value.
Selector
The selector for this component is <hawksearch-range-slider-facet>.
Data Model
The following data model is exposed to the Handlebars template:
{
id: string;
field: string | undefined;
minValue: number;
maxValue: number;
sliderMin: number;
sliderMax: number;
}
sliderMin and sliderMax are on a 0-100 scale and are intended to be used as inputs on the Range Slider component.
Event Binding Attributes
Attribute Name | Attribute Value |
|---|---|
hawksearch-min | |
hawksearch-max |
These attributes should be placed on a number input elements. When these elements lose focus (blurred), the entered price range will be applied as a facet value.
Default Template
<div class='range-slider-facet'>
<div class='row'>
<div class='column column--6'>
<input type='number' hawksearch-min value='{{minValue}}' />
</div>
<div class='column column--6'>
<input type='number' hawksearch-max value='{{maxValue}}' />
</div>
</div>
<hawksearch-range-slider min='{{sliderMin}}' max={{sliderMax}}></hawksearch-range-slider>
</div>