...
Attribute Name | Attribute Value |
|---|---|
hawksearch-handle |
|
This component should always have exactly two elements with the hawksearch-handle attribute: one with a value of min start, and one with a value of max end. This are the elements that the user will drag to adjust the selected range.
...
Event Name | Data Type | |||||
|---|---|---|---|---|---|---|
hawksearch:range-slider-changed |
|
This event fires repeatedly while the user is dragging the handles; it does not wait until the user deselects a handle.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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--minstart" title="MinimumStart" hawksearch-handle="minstart" style="left: {{start}}%;"></span>
<span class="range-slider__handle range-slider__handle--maxend" title="MaximumEnd" hawksearch-handle="maxend" style="left: {{end}}%;"></span>
</div>
</div> |