From b9b014ae1b7fc39ec02a25bf4ead4319cb2fe6cb Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 13 Mar 2017 20:36:23 +0100
Subject: [PATCH] fix(slider): unable to reset tickInterval after it has been
 set (#3488)

Fixes user not being allowed to reset the `tickInterval` after it has been set to a valid value.

Fixes #3452.
---
 src/lib/slider/slider.spec.ts | 17 +++++++++++++++--
 src/lib/slider/slider.ts      | 10 ++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts
index 35ce2babed86..fd4c5080164f 100644
--- a/src/lib/slider/slider.spec.ts
+++ b/src/lib/slider/slider.spec.ts
@@ -517,6 +517,17 @@ describe('MdSlider', () => {
       expect(ticksElement.style.transform).toContain('translateX(9%)');
       expect(ticksContainerElement.style.transform).toBe('translateX(-9%)');
     });
+
+    it('should be able to reset the tick interval after it has been set', () => {
+      expect(sliderNativeElement.classList)
+          .toContain('mat-slider-has-ticks', 'Expected element to have ticks initially.');
+
+      fixture.componentInstance.tickInterval = null;
+      fixture.detectChanges();
+
+      expect(sliderNativeElement.classList)
+          .not.toContain('mat-slider-has-ticks', 'Expected element not to have ticks after reset.');
+    });
   });
 
   describe('slider with thumb label', () => {
@@ -1248,10 +1259,12 @@ class SliderWithStep {
 class SliderWithAutoTickInterval { }
 
 @Component({
-  template: `<md-slider step="3" tickInterval="6"></md-slider>`,
+  template: `<md-slider step="3" [tickInterval]="tickInterval"></md-slider>`,
   styles: [styles],
 })
-class SliderWithSetTickInterval { }
+class SliderWithSetTickInterval {
+  tickInterval = 6;
+}
 
 @Component({
   template: `<md-slider thumbLabel></md-slider>`,
diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
index e3171277cb94..d135260a41ad 100644
--- a/src/lib/slider/slider.ts
+++ b/src/lib/slider/slider.ts
@@ -164,8 +164,14 @@ export class MdSlider implements ControlValueAccessor {
    */
   @Input()
   get tickInterval() { return this._tickInterval; }
-  set tickInterval(v) {
-    this._tickInterval = (v == 'auto') ? v : coerceNumberProperty(v, <number>this._tickInterval);
+  set tickInterval(value) {
+    if (value === 'auto') {
+      this._tickInterval = 'auto';
+    } else if (typeof value === 'number' || typeof value === 'string') {
+      this._tickInterval = coerceNumberProperty(value, this._tickInterval as number);
+    } else {
+      this._tickInterval = 0;
+    }
   }
   private _tickInterval: 'auto' | number = 0;