igniteui-angular-sovn/src/lib/slider/slider.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<igx-ticks
    *ngIf="showTicks && showTopTicks"
    ticksOrientation="top"
    [primaryTicks]="primaryTicks"
    [secondaryTicks]="secondaryTicks"
    [primaryTickLabels]="primaryTickLabels"
    [secondaryTickLabels]="secondaryTickLabels"
    [tickLabelsOrientation]="tickLabelsOrientation"
    [labelsViewEnabled]="labelsViewEnabled"
    [labels]="labels | spreadTickLabels:secondaryTicks"
    [tickLabelTemplateRef]="tickLabelTemplateRef"
    [minValue]="minValue"
    [maxValue]="maxValue">
</igx-ticks>
<div class="igx-slider__track">
    <div class="igx-slider__track-inactive"></div>
    <div #track class="igx-slider__track-fill"></div>
    <div class="igx-slider__track-steps">
        <svg width="100%" height="100%">
          <line #ticks x1="0" y1="2" x2="100%" y2="2"></line>
        </svg>
    </div>
</div>
<div class="igx-slider__thumbs">
    <igx-thumb-label
        *ngIf="isRange"
        type="from"
        [value]="lowerLabel"
        [templateRef]="thumbFromTemplateRef"
        [continuous]="continuous"
        [context]="context"
        [deactiveState]="deactivateThumbLabel"
        [thumb]="thumbFrom"></igx-thumb-label>

    <igx-thumb
        *ngIf="isRange"
        #thumbFrom
        type="from"
        [value]="lowerLabel"
        [disabled]="disabled"
        [continuous]="continuous"
        [onPan]="onPan"
        [stepDistance]="stepDistance"
        [step]="step"
        [templateRef]="thumbFromTemplateRef"
        [context]="context"
        (thumbChange)="onThumbChange()"
        (hoverChange)="onHoverChange($event)"
        [deactiveState]="deactivateThumbLabel"
        [thumbLabelVisibilityDuration]="thumbLabelVisibilityDuration"></igx-thumb>

    <igx-thumb-label
        [value]="upperLabel"
        type="to"
        [templateRef]="thumbToTemplateRef"
        [continuous]="continuous"
        [context]="context"
        [deactiveState]="deactivateThumbLabel"
        [thumb]="thumbTo"></igx-thumb-label>

    <igx-thumb
        #thumbTo
        type="to"
        [value]="upperLabel"
        [disabled]="disabled"
        [continuous]="continuous"
        [onPan]="onPan"
        [stepDistance]="stepDistance"
        [step]="step"
        [templateRef]="thumbToTemplateRef"
        [context]="context"
        (thumbChange)="onThumbChange()"
        (hoverChange)="onHoverChange($event)"
        [deactiveState]="deactivateThumbLabel"
        [thumbLabelVisibilityDuration]="thumbLabelVisibilityDuration"></igx-thumb>
</div>
<igx-ticks
    *ngIf="showTicks && showBottomTicks"
    ticksOrientation="bottom"
    [primaryTicks]="primaryTicks"
    [secondaryTicks]="secondaryTicks"
    [primaryTickLabels]="primaryTickLabels"
    [secondaryTickLabels]="secondaryTickLabels"
    [tickLabelsOrientation]="tickLabelsOrientation"
    [labelsViewEnabled]="labelsViewEnabled"
    [labels]="labels | spreadTickLabels:secondaryTicks"
    [tickLabelTemplateRef]="tickLabelTemplateRef"
    [minValue]="minValue"
    [maxValue]="maxValue">
</igx-ticks>