@rdkmaster/jigsaw-labs/component/slider/slider.html

Jigsaw, the next generation component set for RDK

<div class="jigsaw-slider"
     [class.jigsaw-slider-disabled]="disabled"
     [class.jigsaw-slider-with-marks]="marks&& marks.length > 0">

    <div class="jigsaw-slider-rail"></div>
    <div class="jigsaw-slider-track" [ngStyle]="_$trackStyle"></div>

    <div class="jigsaw-slider-step">
        <span *ngFor="let mark of _$marks" class="jigsaw-slider-dot jigsaw-slider-dot-active"
              [ngStyle]="mark.dotStyle"></span>
    </div>

    <jigsaw-slider-handle *ngFor="let item of _$value;let i = index;trackBy: _$trackByFun" [value]="item" [key]="i"></jigsaw-slider-handle>

    <div *ngIf="_$marks.length > 0" class="jigsaw-slider-mark">
        <span *ngFor="let mark of _$marks" class="jigsaw-slider-mark-text"
              [ngStyle]="mark.labelStyle">{{mark.label}}</span>
    </div>
</div>