feat(slider): represents the slider labels by their indexes

represents the slider labels by their indexes and allow templating of
the lower and upper thumbs

Closes #3449 #4492

Author: Aleksandyr

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

@@ -6,16 +6,26 @@
     </div>
     <div class="igx-slider__thumbs">
         <div (keydown)="onKeyDown($event);" (keyup)="hideThumbsLabels()" (blur)="hideThumbLabelsOnBlur()" (focus)="onFocus($event);"
-            *ngIf="isRange" class="igx-slider__thumb-from" tabindex="1" [ngClass]="{ 'igx-slider__thumb-from--active': isActiveLabel }"
-            #thumbFrom>
-            <span class="label">{{ leftLabel }}</span>
+        *ngIf="isRange" class="igx-slider__thumb-from" tabindex="1" [ngClass]="{ 'igx-slider__thumb-from--active': isActiveLabel }"
+        #thumbFrom>
+            <span class="label">
+                <ng-container *ngTemplateOutlet="thumbFromTemplateRef ? thumbFromTemplateRef : thumbFromDefaultTemplate; context: context"></ng-container>
+            </span>
             <span class="dot"></span>
         </div>
         <div (keydown)="onKeyDown($event);" (keyup)="hideThumbsLabels()" (blur)="hideThumbLabelsOnBlur()" (focus)="onFocus($event);"
             class="igx-slider__thumb-to" tabindex="1" [ngClass]="{ 'igx-slider__thumb-to--active': isActiveLabel }" #thumbTo>
-            <span *ngIf="isRange" class="label">{{ rightLabel }}</span>
-            <span *ngIf="!isRange" class="label">{{ label }}</span>
+            <span class="label">
+                <ng-container *ngTemplateOutlet="thumbToTemplateRef ? thumbToTemplateRef : thumbToDefaultTemplate; context: context"></ng-container>
+            </span>
             <span class="dot"></span>
         </div>
     </div>
 </div>
+
+<ng-template #thumbFromDefaultTemplate>
+    {{ lowerLabel }}
+</ng-template>
+<ng-template #thumbToDefaultTemplate>
+    {{ upperLabel }}
+</ng-template>