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

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>

Hawksearch Handlebars UI

Range Slider Facet Component

Analytics

Overview

Selector

Data Model

Event Binding Attributes

Default Template

Related content