Overview

The Range Slider component provides a draggable interface that allows the user to select a range between 0-100. This component is currently only used within the Range Slider Facet Component.

Selector

The selector for this component is <hawksearch-range-slider>.

Data Model

The following data model is exposed to the Handlebars template:

{
  start: number;
  end: number;
}

Event Binding Attributes

This component should always have exactly two elements with the hawksearch-handle attribute: one with a value of min, and one with a value of max. This are the elements that the user will drag to adjust the selected range.

Events

{
  min: number;
  max: number;
}

This event fires repeatedly while the user is dragging the handles; it does not wait until the user deselects a handle.

Default Template

<div class="range-slider">
    <div class="range-slider__container">
        <div class="range-slider__bar">
            <div class="range-slider__bar__active" hawksearch-bar style="left: {{start}}%; right: {{subtract 100 end}}%;"></div>
        </div>
        <span class="range-slider__handle range-slider__handle--min" title="Minimum" hawksearch-handle="min" style="left: {{start}}%;"></span>
        <span class="range-slider__handle range-slider__handle--max" title="Maximum" hawksearch-handle="max" style="left: {{end}}%;"></span>
    </div>
</div>