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 @@
Slider with set tick interval
Slider with Thumb Label
+Slider with one-way binding
+
+
+
Slider with two-way binding
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;
+ 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 = sliderNativeElement.querySelector('.md-slider-track');
+ trackFillElement = sliderNativeElement.querySelector('.md-slider-track-fill');
+ thumbElement = 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: ``
+})
+class SliderWithOneWayBinding {
+ val = 50;
+}
+
@Component({
template: ``
})
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);
+ }
}
/**