<!-- Semmet Angular: Slider — https://www.w3.org/WAI/ARIA/apg/patterns/slider/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> label="Volume" />
-->
<label [id]="instanceId + '-label'">{{ label() }}</label>
<div #track class="track" (pointerdown)="handlePointerDown($event)" (pointermove)="handlePointerMove($event)">
  <div class="fill" [style.width.%]="value()"></div>
  <div
    class="thumb"
    role="slider"
    tabindex="0"
    [attr.aria-labelledby]="instanceId + '-label'"
    [attr.aria-valuemin]="min"
    [attr.aria-valuemax]="max"
    [attr.aria-valuenow]="value()"
    [style.left.%]="value()"
    (keydown)="handleKeydown($event)"
  ></div>
</div>
