Range Slider Facet Component
- Jordan Kasper (Deactivated)
Owned by Jordan Kasper (Deactivated)
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;
startValue: number;
endValue: number;
minValue: number;
maxValue: number;
sliderStart: number;
sliderEnd: number;
}sliderStart and sliderEnd 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-start | Â |
hawksearch-end | Â |
These attributes should be placed on 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-start value="{{startValue}}" min="{{minValue}}" max="{{endValue}}" aria-label="Minimum Price" />
</div>
<div class="column column--6">
<input type="number" hawksearch-end value="{{endValue}}" min="{{startValue}}" max="{{maxValue}}" aria-label="Maximum Price" />
</div>
</div>
<hawksearch-range-slider start="{{sliderStart}}" end="{{sliderEnd}}"></hawksearch-range-slider>
</div>Â