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>