From 123d6eea5bbd7b02861c7d9870934052d7b8ed99 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Wed, 26 Oct 2016 10:56:09 -0700
Subject: [PATCH] Fix(slider): Update slider position when value binding
 changes. Closes #1386

---
 src/demo-app/slider/slider-demo.html |  4 ++
 src/demo-app/slider/slider-demo.ts   |  1 +
 src/lib/slider/slider.spec.ts        | 56 ++++++++++++++++++++++++++++
 src/lib/slider/slider.ts             |  5 ++-
 4 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/src/demo-app/slider/slider-demo.html b/src/demo-app/slider/slider-demo.html
index caa923afb276..8496236039b5 100644
--- a/src/demo-app/slider/slider-demo.html
+++ b/src/demo-app/slider/slider-demo.html
@@ -24,6 +24,10 @@ <h1>Slider with set tick interval</h1>
 <h1>Slider with Thumb Label</h1>
 <md-slider thumb-label></md-slider>
 
+<h1>Slider with one-way binding</h1>
+<md-slider [value]="val" step="40"></md-slider>
+<input [(ngModel)]="val">
+
 <h1>Slider with two-way binding</h1>
 <md-slider [(ngModel)]="demo" step="40"></md-slider>
 <input [(ngModel)]="demo">
diff --git a/src/demo-app/slider/slider-demo.ts b/src/demo-app/slider/slider-demo.ts
index f199cf26726e..2aba4410f874 100644
--- a/src/demo-app/slider/slider-demo.ts
+++ b/src/demo-app/slider/slider-demo.ts
@@ -8,4 +8,5 @@ import {Component} from '@angular/core';
 })
 export class SliderDemo {
   demo: number;
+  val: number = 50;
 }
diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts
index fd05c4a6fb43..acc7562aea6f 100644
--- a/src/lib/slider/slider.spec.ts
+++ b/src/lib/slider/slider.spec.ts
@@ -22,6 +22,7 @@ describe('MdSlider', () => {
         SliderWithAutoTickInterval,
         SliderWithSetTickInterval,
         SliderWithThumbLabel,
+        SliderWithOneWayBinding,
         SliderWithTwoWayBinding,
       ],
       providers: [
@@ -621,6 +622,54 @@ describe('MdSlider', () => {
 
     // TODO: Add tests for ng-pristine, ng-touched, ng-invalid.
   });
+
+  describe('slider with value property binding', () => {
+    let fixture: ComponentFixture<SliderWithOneWayBinding>;
+    let sliderDebugElement: DebugElement;
+    let sliderNativeElement: HTMLElement;
+    let sliderInstance: MdSlider;
+    let sliderTrackElement: HTMLElement;
+    let testComponent: SliderWithOneWayBinding;
+    let trackFillElement: HTMLElement;
+    let thumbElement: HTMLElement;
+    let sliderDimensions: ClientRect;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SliderWithOneWayBinding);
+      fixture.detectChanges();
+
+      testComponent = fixture.debugElement.componentInstance;
+
+      sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
+      sliderNativeElement = sliderDebugElement.nativeElement;
+      sliderInstance = sliderDebugElement.injector.get(MdSlider);
+      sliderTrackElement = <HTMLElement>sliderNativeElement.querySelector('.md-slider-track');
+      trackFillElement = <HTMLElement>sliderNativeElement.querySelector('.md-slider-track-fill');
+      thumbElement = <HTMLElement>sliderNativeElement.querySelector('.md-slider-thumb-position');
+      sliderDimensions = sliderTrackElement.getBoundingClientRect();
+    });
+
+    it('should initialize based on bound value', () => {
+      let trackFillDimensions = trackFillElement.getBoundingClientRect();
+      let thumbDimensions = thumbElement.getBoundingClientRect();
+      let thumbPosition = thumbDimensions.left - trackFillDimensions.left;
+
+      expect(sliderInstance.value).toBe(50);
+      expect(thumbPosition).toBe(sliderDimensions.width / 2);
+    });
+
+    it('should update when bound value changes', () => {
+      testComponent.val = 75;
+      fixture.detectChanges();
+
+      let trackFillDimensions = trackFillElement.getBoundingClientRect();
+      let thumbDimensions = thumbElement.getBoundingClientRect();
+      let thumbPosition = thumbDimensions.left - trackFillDimensions.left;
+
+      expect(sliderInstance.value).toBe(75);
+      expect(thumbPosition).toBe(sliderDimensions.width * 3 / 4);
+    });
+  });
 });
 
 // The transition has to be removed in order to test the updated positions without setTimeout.
@@ -671,6 +720,13 @@ class SliderWithSetTickInterval { }
 })
 class SliderWithThumbLabel { }
 
+@Component({
+  template: `<md-slider [value]="val"></md-slider>`
+})
+class SliderWithOneWayBinding {
+  val = 50;
+}
+
 @Component({
   template: `<md-slider [formControl]="control"></md-slider>`
 })
diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
index 8c80ee4ad7ee..512f046f194f 100644
--- a/src/lib/slider/slider.ts
+++ b/src/lib/slider/slider.ts
@@ -154,6 +154,7 @@ export class MdSlider implements AfterContentInit, ControlValueAccessor {
     this._value = Number(v);
     this._isInitialized = true;
     this._controlValueAccessorChangeFn(this._value);
+    this.snapThumbToValue();
   }
 
   constructor(elementRef: ElementRef) {
@@ -265,7 +266,9 @@ export class MdSlider implements AfterContentInit, ControlValueAccessor {
    */
   snapThumbToValue() {
     this.updatePercentFromValue();
-    this._renderer.updateThumbAndFillPosition(this._percent, this._sliderDimensions.width);
+    if (this._sliderDimensions) {
+      this._renderer.updateThumbAndFillPosition(this._percent, this._sliderDimensions.width);
+    }
   }
 
   /**