fix(slider): update thumb position when value changes. Closes #1386 (#1610)

Author: mmalerba

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">

src/demo-app/slider/slider-demo.ts

@@ -8,4 +8,5 @@ import {Component} from '@angular/core';
 })
 export class SliderDemo {
   demo: number;
+  val: number = 50;
 }

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>`
 })

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);
+    }
   }
 
   /**