From 171486ea5497a510f36e85419a0ebf22d550625b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 8 Feb 2018 22:41:42 +0100
Subject: [PATCH] fix(slider): unable to reset value by setting it back to
 undefined (#9768)

Fixes the slider value not being reset to zero if the consumer sets it to undefined.

Fixes #9740.
---
 src/lib/slider/slider.spec.ts | 22 ++++++++++++++++++++--
 src/lib/slider/slider.ts      |  2 +-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts
index cdad8b42cdf..cbc9053a8b5 100644
--- a/src/lib/slider/slider.spec.ts
+++ b/src/lib/slider/slider.spec.ts
@@ -12,7 +12,7 @@ import {
 } from '@angular/cdk/keycodes';
 import {dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing';
 import {Component, DebugElement, ViewChild} from '@angular/core';
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {MatSlider, MatSliderModule} from './index';
@@ -1274,6 +1274,23 @@ describe('MatSlider with forms module', () => {
 
       expect(testComponent.val).toBe(1);
     });
+
+    it('should be able to reset a slider by setting the model back to undefined', fakeAsync(() => {
+      expect(testComponent.slider.value).toBe(0);
+
+      testComponent.val = 5;
+      fixture.detectChanges();
+      flush();
+
+      expect(testComponent.slider.value).toBe(5);
+
+      testComponent.val = undefined;
+      fixture.detectChanges();
+      flush();
+
+      expect(testComponent.slider.value).toBe(0);
+    }));
+
   });
 
   describe('slider as a custom form control', () => {
@@ -1464,7 +1481,8 @@ class SliderWithFormControl {
   styles: [styles],
 })
 class SliderWithNgModel {
-  val = 0;
+  @ViewChild(MatSlider) slider: MatSlider;
+  val: number | undefined = 0;
 }
 
 @Component({
diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
index e282ec038eb..6ab64bddca8 100644
--- a/src/lib/slider/slider.ts
+++ b/src/lib/slider/slider.ts
@@ -238,7 +238,7 @@ export class MatSlider extends _MatSliderMixinBase
   }
   set value(v: number | null) {
     if (v !== this._value) {
-      this._value = coerceNumberProperty(v, this._value || 0);
+      this._value = coerceNumberProperty(v);
       this._percent = this._calculatePercentage(this._value);
 
       // Since this also modifies the percentage, we need to let the change detection know.