...
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--min'start" title='Minimum'"Start" hawksearch-handle='min'"start" style='"left: {{start}}%;'"></span> <span class='"range-slider__handle range-slider__handle--max'end" title='Maximum'"End" hawksearch-handle='max'"end" style='"left: {{end}}%;'"></span> </div> </div> |