Versions Compared

Old Version 2

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

Saved on

compared with

New Version Current

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

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagetypescript
{
  id: string;
  field: string | undefined;
  startValue: number;
  endValue: number;
  minValue: number;
  maxValue: number;
  sliderMinsliderStart: number;
  sliderMaxsliderEnd: number;
}
Info

sliderMin sliderStart and sliderMax sliderEnd are on a 0-100 scale and are intended to be used as inputs on the Range Slider component.

...

Attribute Name

Attribute Value

hawksearch-minstart

hawksearch-maxend

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.

...

Code Block
breakoutModewide
languagehtml
<div class='"range-slider-facet'">
    <div class='"row'">
        <div class='"column column--6'">
            <input type='"number'" hawksearch-minstart value='"{{startValue}}" min="{{minValue}}'" max="{{endValue}}" aria-label="Minimum Price" />
        </div>
        <div class='"column column--6'">
            <input type='"number'" hawksearch-maxend value='"{{endValue}}" min="{{startValue}}" max="{{maxValue}}'" aria-label="Maximum Price" />
        </div>
    </div>
    <hawksearch-range-slider minstart='"{{sliderMinsliderStart}}'" maxend="{{sliderMaxsliderEnd}}"></hawksearch-range-slider>
</div>

...