Versions Compared

Old Version 1

changes.mady.by.user Jordan Kasper (Deactivated)

Saved on

compared with

New Version 2

changes.mady.by.user Jordan Kasper (Deactivated)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

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:

Code Block
languagetypescript
{
  id: string;
  field: string | undefined;
  minValue: number;
  maxValue: number;
  sliderMin: number;
  sliderMax: number;
}
Info

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

Code Block
breakoutModewide
languagehtml
<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>