Merge pull request #5715 from IgniteUI/slider-label-ie11-master

feat(slider): exposing the label as a separate component

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss

@@ -34,10 +34,6 @@
         @include e(thumb-#{$t}) {
             @extend %igx-thumb-display !optional;
 
-            .label {
-                @extend %igx-thumb-label !optional;
-            }
-
             .dot {
                 @extend %igx-thumb-dot !optional;
             }
@@ -46,12 +42,24 @@
         @include e(thumb-#{$t}, $m: active) {
             @extend %igx-thumb--active !optional;
 
+            .dot {
+                @extend %igx-thumb-dot--active !optional;
+            }
+        }
+
+        @include e(label-#{$t}) {
+            @extend %igx-label-display !optional;
+
             .label {
-                @extend %igx-thumb-label--active !optional;
+                @extend %igx-thumb-label !optional;
             }
+        }
 
-            .dot {
-                @extend %igx-thumb-dot--active !optional;
+        @include e(label-#{$t}, $m: active) {
+            @extend %igx-thumb--active !optional;
+
+            .label {
+                @extend %igx-thumb-label--active !optional;
             }
         }
     }
@@ -91,10 +99,6 @@
                 @extend %igx-thumb-display !optional;
                 @extend %igx-thumb--disabled !optional;
 
-                .label {
-                    @extend %igx-thumb-label !optional;
-                }
-
                 .dot {
                     @extend %igx-thumb-dot--disabled !optional;
                 }

projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss

@@ -219,13 +219,26 @@
         }
     }
 
-    %igx-thumb-label {
+    %igx-label-display {
         position: absolute;
         display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        height: $slider-thumb-height;
+        outline-style: none;
+        top: -#{rem($slider-thumb-radius)};
+        margin: 0 auto;
+    }
+
+    %igx-thumb-label {
+        position: relative;
+        display: flex;
         align-items: center;
         justify-content: center;
         flex: 0 0 auto;
-        top: -#{rem($slider-thumb-height - 6px)};
+        top: -#{rem($slider-thumb-height - 4px)};
+        left: -50%;
         pointer-events: none;
         min-width: rem($slider-label-width);
         height: rem($slider-label-height);
@@ -234,7 +247,7 @@
         margin: 0 auto;
         font-size: $slider-label-font-size;
         font-weight: $slider-label-font-weight;
-        line-height: 1;
+        line-height: rem(18px);
         color: --var($theme, 'label-text-color');
         background: --var($theme, 'label-background-color');
         opacity: 0;

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

@@ -0,0 +1,7 @@
+<div class="label">
+    <ng-container *ngTemplateOutlet="templateRef ? templateRef : thumbFromDefaultTemplate; context: context"></ng-container>
+</div>
+
+<ng-template #thumbFromDefaultTemplate>
+    {{ value }}
+</ng-template>

projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts

@@ -0,0 +1,63 @@
+import { Component, NgModule, Input, TemplateRef, HostBinding, ElementRef } from '@angular/core';
+import { SliderHandle } from '../slider.common';
+
+@Component({
+    selector: 'igx-thumb-label',
+    templateUrl: 'thumb-label.component.html'
+})
+export class IgxThumbLabelComponent {
+    private _active: boolean;
+
+    @Input()
+    public value: number;
+
+    @Input()
+    public templateRef: TemplateRef<any>;
+
+    @Input()
+    public context: any;
+
+    @Input()
+    public type: SliderHandle;
+
+    @Input()
+    public continuous: boolean;
+
+    @HostBinding('class.igx-slider__label-from')
+    public get thumbFromClass() {
+        return this.type === SliderHandle.FROM;
+    }
+
+    @HostBinding('class.igx-slider__label-to')
+    public get thumbToClass() {
+        return this.type === SliderHandle.TO;
+    }
+
+    @HostBinding('class.igx-slider__label-from--active')
+    public get thumbFromActiveClass() {
+        return this.type === SliderHandle.FROM && this.active;
+    }
+
+    @HostBinding('class.igx-slider__label-to--active')
+    public get thumbToActiveClass() {
+        return this.type === SliderHandle.TO && this.active;
+    }
+
+    constructor(private _elementRef: ElementRef) { }
+
+    public get nativeElement() {
+        return this._elementRef.nativeElement;
+    }
+
+    public get active() {
+        return this._active;
+    }
+
+    public set active(val: boolean) {
+        if (this.continuous) {
+            return;
+        }
+
+        this._active = val;
+    }
+}

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

@@ -3,7 +3,15 @@
     <div #ticks class="igx-slider__track-ticks"></div>
 </div>
 <div class="igx-slider__thumbs">
-    <igx-thumb *ngIf="isRange"
+    <igx-thumb-label
+        *ngIf="isRange"
+        [type]="0"
+        [value]="value"
+        [templateRef]="thumbFromTemplateRef"
+        [continuous]="continuous"
+        [context]="context"></igx-thumb-label>
+
+        <igx-thumb *ngIf="isRange"
         #thumbFrom
         [type]="0"
         [value]="lowerLabel"
@@ -17,7 +25,15 @@
         (onChange)="onThumbChange()"
         (onHoverChange)="onHoverChange($event)"
         [thumbLabelVisibilityDuration]="thumbLabelVisibilityDuration"></igx-thumb>
-    <igx-thumb
+
+    <igx-thumb-label
+        [value]="value"
+        [type]="1"
+        [templateRef]="thumbToTemplateRef"
+        [continuous]="continuous"
+        [context]="context"></igx-thumb-label>
+
+        <igx-thumb
         #thumbTo
         [type]="1"
         [value]="upperLabel"
@@ -31,4 +47,5 @@
         (onChange)="onThumbChange()"
         (onHoverChange)="onHoverChange($event)"
         [thumbLabelVisibilityDuration]="thumbLabelVisibilityDuration"></igx-thumb>
+
 </div>