Merge pull request #4996 from IgniteUI/slider-labels-feature-7.3.x

labels feature and refactoring SLIDER

Author: zdrawku

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
+
+## 7.3.4
+### 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.
+- **igxSlider** - deprecate **isContiunous** property.
+
 ## 7.3.3
 
 - `igx-core()` now includes some styles for printing layout.
@@ -9,9 +15,6 @@ In order to turn them off, you need to pass an argument and set it to `false`
         @include igx-core($print-layout: false); 
     ```
 
-- `Pager`
-    - **Behavioral Change** - The pager is now hidden when there are no records in the grid.
-
 ## 7.3.1
 - `IgxGrid` Custom keyboard navigation
     - `onFocusChange` event is deprecated.
@@ -63,6 +66,15 @@ In order to turn them off, you need to pass an argument and set it to `false`
     </igx-drop-down>
     ```
 
+## 7.2.12
+### 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.
+- **igxSlider** - deprecate **isContiunous** property.
+ 
+## 7.2.9
+- `Pager`
+    - **Behavioral Change** - The pager is now hidden when there are no records in the grid.
+
 ## 7.2.6
 - `igxGrid`
     - **Feature** The `groupsRecords` property now returns the full grouping tree as in 7.1 and also includes the grouping information for all pages.

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,33 @@
-<div class="igx-slider" [class.igx-slider--disabled]="disabled" #slider (panstart)="showThumbsLabels()" (panend)="onPanEnd($event)"
-    (pan)="update($event)" (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>
-    </div>
+<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">
+    <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>

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'));
         });