feat(slider): labels feat changes

Closes #3449

Author: Aleksandyr

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 7.2.x
+### New feature
+- **igxSlider** - exposing new `labels` property accepting a collection of literal values that become equally spread over the slider, by placing each element as a thumb label.
+ 
 ## 7.2.9
 - `Pager`
     - **Behavioral Change** - The pager is now hidden when there are no records in the grid.

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

@@ -134,7 +134,7 @@
         width: 100%;
         height: inherit;
         background: --var($theme, 'track-color');
-        transform-origin: 0 0 0;
+        transform-origin: left center;
         transform: scaleX(0);
     }
 

projects/igniteui-angular/src/lib/slider/README.md

@@ -1,5 +1,7 @@
 # igx-slider
 
+### The latest version of the SPEC could be found in the [Wiki](https://github.com/IgniteUI/igniteui-angular/wiki/igxSlider-Specification).
+
 The slider component allows users to select a value in certain range or select a range of values. 
 Based on its configuration it's a slider or range slider.  
 A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider.html)
@@ -60,7 +62,7 @@ import { IgxSliderComponent } from "../../../src/main";
 | :--- | :--- | :--- |
 | id | string | Unique identifier of the component. If not provided it will be automatically generated.|
 | disabled | boolean | Disables or enables UI interaction. |
-| isContinuous | boolean | Marks slider as continuous. By default is considered that the slider is discrete. Discrete slider does not have ticks and does not shows bubble labels for values. |
+| continuous | boolean | Marks slider as continuous. By default is considered that the slider is discrete. Discrete slider does not have ticks and does not shows bubble labels for values. |
 | lowerBound | number | The lower boundary of the slider value. If not set is the same as min value. |
 | maxValue | number | The maximal value for the slider. |
 | minValue | number | The minimal value for the slider. |

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

@@ -1,21 +1,41 @@
-<div class="igx-slider" [class.igx-slider--disabled]="disabled" #slider (panstart)="showThumbsLabels()" (panend)="onPanEnd($event)"
-    (pan)="update($event)" (tap)="onTap($event)">
+<div
+    #slider
+    class="igx-slider"
+    [class.igx-slider--disabled]="disabled"
+    (pointerdown)="findClosestThumb($event)"
+    (pan)="update($event.srcEvent.clientX)"
+    (tap)="onTap($event)">
     <div class="igx-slider__track">
         <div #track class="igx-slider__track-fill"></div>
         <div #ticks class="igx-slider__track-ticks"></div>
     </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">{{ lowerValue}}</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">{{ upperValue}}</span>
-            <span *ngIf="!isRange" class="label">{{ value }}</span>
-            <span class="dot"></span>
-        </div>
+        <igx-thumb *ngIf="isRange"
+            #thumbFrom
+            [type]="0"
+            [value]="lowerLabel"
+            [disabled]="disabled"
+            [continuous]="continuous"
+            [onPan]="onPan"
+            [stepDistance]="stepDistance"
+            [step]="step"
+            [fromHandler]="true"
+            [templateRef]="thumbFromTemplateRef"
+            [context]="context"
+            (onChange)="onThumbChange()"
+            [thumbLabelVisibilityDuration]="thumbLabelVisibilityDuration"></igx-thumb>
+        <igx-thumb
+            #thumbTo
+            [type]="1"
+            [value]="upperLabel"
+            [disabled]="disabled"
+            [continuous]="continuous"
+            [onPan]="onPan"
+            [stepDistance]="stepDistance"
+            [step]="step"
+            [templateRef]="thumbToTemplateRef"
+            [context]="context"
+            (onChange)="onThumbChange()"
+            [thumbLabelVisibilityDuration]="thumbLabelVisibilityDuration"></igx-thumb>
     </div>
 </div>

projects/igniteui-angular/src/lib/slider/slider.component.spec.ts

@@ -385,9 +385,9 @@ describe('IgxSlider', () => {
                 expect((slider.value as IRangeSliderValue).upper).toBe(slider.upperBound);
             });
 
-        it('should switch from left thumb to be focused upper when lower value is near upper', () => {
+        it('should switch from left thumb to be focused upper when lower value is equal to upper', () => {
             slider.value = {
-                lower: 59,
+                lower: 60,
                 upper: 60
             };
 
@@ -398,14 +398,14 @@ describe('IgxSlider', () => {
             UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', fromThumb, true);
             fixture.detectChanges();
 
-            expect((slider.value as IRangeSliderValue).lower).toBe(59);
+            expect((slider.value as IRangeSliderValue).lower).toBe(60);
             expect((slider.value as IRangeSliderValue).upper).toBe(60);
             expect(document.activeElement).toBe(fixture.nativeElement.querySelector('.igx-slider__thumb-to'));
         });
 
-        it('should switch from right thumb to be focused lower when upper value is near lower', () => {
+        it('should switch from right thumb to be focused lower when upper value is equal to lower', () => {
             slider.value = {
-                lower: 59,
+                lower: 60,
                 upper: 60
             };
             fixture.detectChanges();
@@ -415,7 +415,7 @@ describe('IgxSlider', () => {
             UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', toThumb, true);
             fixture.detectChanges();
 
-            expect((slider.value as IRangeSliderValue).lower).toBe(59);
+            expect((slider.value as IRangeSliderValue).lower).toBe(60);
             expect((slider.value as IRangeSliderValue).upper).toBe(60);
             expect(document.activeElement).toBe(fixture.nativeElement.querySelector('.igx-slider__thumb-from'));
         });