Range Slider Component
- Jordan Kasper (Deactivated)
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
Attribute Name | Attribute Value |
|---|---|
hawksearch-handle |
|
This component should always have exactly two elements with the hawksearch-handle attribute: one with a value of start, and one with a value of end. This are the elements that the user will drag to adjust the selected range.
Events
Event Name | Data Type |
|---|---|
hawksearch:range-slider-changed | {
start: number;
end: number;
} |
This event fires repeatedly while the user is dragging the handles; it does not wait until the user deselects a handle.
The min and max values will always be between 0 and 100, inclusive.
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--start" title="Start" hawksearch-handle="start" style="left: {{start}}%;"></span>
<span class="range-slider__handle range-slider__handle--end" title="End" hawksearch-handle="end" style="left: {{end}}%;"></span>
</div>
</div>