Merge pull request #10324 from IgniteUI/normalize-slider-initialval

fix(slider): normalize initial value set up

Author: zdrawku

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

@@ -236,6 +236,24 @@ describe('IgxSlider', () => {
             expect(slider.value.upper).toBe(30);
         });
 
+        it('should position correctly lower and upper value based on the step', () => {
+            slider.step = 10;
+
+            slider.type = IgxSliderType.RANGE;
+
+            fixture.detectChanges();
+
+            slider.value = {
+                lower: 23,
+                upper: 56
+            };
+
+            fixture.detectChanges();
+
+            expect((slider.value as IRangeSliderValue).lower).toBe(20);
+            expect((slider.value as IRangeSliderValue).upper).toBe(50);
+        });
+
         it('should not set lower value outside bounds slider when slider is RANGE', () => {
             slider.lowerBound = 10;
             slider.upperBound = 40;

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

@@ -12,7 +12,8 @@ import {
     ChangeDetectorRef,
     OnChanges,
     NgZone,
-    AfterContentInit
+    AfterContentInit,
+    SimpleChanges
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { EditorProvider } from '../core/edit-provider';
@@ -274,7 +275,9 @@ export class IgxSliderComponent implements
 
         if (this._hasViewInit) {
             this.stepDistance = this.calculateStepDistance();
-            this.normalizeByStep(this.value);
+            this.normalizeByStep(this._value);
+            this.setValue(this._value, true);
+            this.positionHandlersAndUpdateTrack();
             this.setTickInterval();
         }
     }
@@ -564,11 +567,11 @@ export class IgxSliderComponent implements
      */
     @Input()
     public set value(value: number | IRangeSliderValue) {
+        this.normalizeByStep(value);
+
         if (this._hasViewInit) {
-            this.setValue(value, true);
+            this.setValue(this._value, true);
             this.positionHandlersAndUpdateTrack();
-        } else {
-            this._value = value;
         }
     }
 
@@ -960,12 +963,16 @@ export class IgxSliderComponent implements
     /**
      * @hidden
      */
-    public ngOnChanges(changes) {
+    public ngOnChanges(changes: SimpleChanges) {
         if (changes.minValue && changes.maxValue &&
             changes.minValue.currentValue < changes.maxValue.currentValue) {
             this._maxValue = changes.maxValue.currentValue;
             this._minValue = changes.minValue.currentValue;
         }
+
+        if (changes.step && changes.step.isFirstChange()) {
+            this.normalizeByStep(this._value);
+        }
     }
 
     /**
@@ -1037,6 +1044,8 @@ export class IgxSliderComponent implements
         }
 
         this.normalizeByStep(value);
+        this.setValue(this._value, false);
+        this.positionHandlersAndUpdateTrack();
     }
 
     /**
@@ -1349,15 +1358,13 @@ export class IgxSliderComponent implements
      */
     private normalizeByStep(value: IRangeSliderValue | number) {
         if (this.isRange) {
-            this.value = {
+            this._value = {
                 lower: (value as IRangeSliderValue).lower - ((value as IRangeSliderValue).lower % this.step),
                 upper: (value as IRangeSliderValue).upper - ((value as IRangeSliderValue).upper % this.step)
             };
         } else {
-            this.value = (value as number) - ((value as number) % this.step);
+            this._value = (value as number) - ((value as number) % this.step);
         }
-
-        this._cdr.detectChanges();
     }
 
     private updateTrack() {

src/app/app.module.ts

@@ -17,7 +17,7 @@ import { SharedModule } from './shared/shared.module';
 import { routing } from './routing';
 import { ActionStripSampleComponent } from './action-strip/action-strip.sample';
 import { AppComponent } from './app.component';
-import { AvatartSampleComponent } from './avatar/avatar.sample';
+import { AvatarSampleComponent } from './avatar/avatar.sample';
 import { PageHeaderComponent } from './pageHeading/pageHeading.component';
 import { BadgeSampleComponent } from './badge/badge.sample';
 import { ButtonSampleComponent } from './button/button.sample';
@@ -162,7 +162,7 @@ const components = [
     AutocompletePipeContains,
     AutocompleteGroupPipeContains,
     AutocompleteSampleComponent,
-    AvatartSampleComponent,
+    AvatarSampleComponent,
     BadgeSampleComponent,
     BannerSampleComponent,
     ButtonSampleComponent,

src/app/app.routing.ts

@@ -1,6 +1,6 @@
 import { TreeGridAddRowSampleComponent } from './tree-grid-add-row/tree-grid-add-row.sample';
 import { RouterModule } from '@angular/router';
-import { AvatartSampleComponent } from './avatar/avatar.sample';
+import { AvatarSampleComponent } from './avatar/avatar.sample';
 import { BadgeSampleComponent } from './badge/badge.sample';
 import { ButtonSampleComponent } from './button/button.sample';
 import { CalendarSampleComponent } from './calendar/calendar.sample';
@@ -116,7 +116,7 @@ const appRoutes = [
     },
     {
         path: 'avatar',
-        component: AvatartSampleComponent
+        component: AvatarSampleComponent
     },
     {
         path: 'badge',

src/app/avatar/avatar.sample.ts

@@ -5,5 +5,5 @@ import { Component } from '@angular/core';
     styleUrls: ['avatar.sample.css'],
     templateUrl: `avatar.sample.html`
 })
-export class AvatartSampleComponent {
+export class AvatarSampleComponent {
 }

src/app/routing.ts

@@ -1,6 +1,6 @@
 import { TreeGridAddRowSampleComponent } from './tree-grid-add-row/tree-grid-add-row.sample';
 import { RouterModule } from '@angular/router';
-import { AvatartSampleComponent } from './avatar/avatar.sample';
+import { AvatarSampleComponent } from './avatar/avatar.sample';
 import { BadgeSampleComponent } from './badge/badge.sample';
 import { ButtonSampleComponent } from './button/button.sample';
 import { CalendarSampleComponent } from './calendar/calendar.sample';
@@ -146,7 +146,7 @@ const appRoutes = [
     },
     {
         path: 'avatar',
-        component: AvatartSampleComponent
+        component: AvatarSampleComponent
     },
     {
         path: 'badge',