fix(slider): not reacting to directionality changes

Fixes the slider not updating if its direction is changed dynamically. This is something I came across while testing angular#6641.

src/lib/slider/slider.spec.ts

@@ -958,6 +958,23 @@ describe('MdSlider without forms', () => {
       expect(sliderInstance.value).toBe(30);
     });
 
+    it('should re-render when the direction changes', () => {
+      const thumbContainer =
+          sliderNativeElement.querySelector('.mat-slider-thumb-container')! as HTMLElement;
+
+      dispatchClickEventSequence(sliderNativeElement, 0.7);
+      fixture.detectChanges();
+
+      // Some browsers might round the decimals differently.
+      // Trim the end to normalize the expectation.
+      expect(thumbContainer.style.transform).toContain('translateX(-30');
+
+      testComponent.dir = 'rtl';
+      fixture.detectChanges();
+
+      expect(thumbContainer.style.transform).toContain('translateX(-70');
+    });
+
     it('should increment inverted slider by 1 on right arrow pressed', () => {
       testComponent.invert = true;
       fixture.detectChanges();

src/lib/slider/slider.ts

@@ -38,6 +38,7 @@ import {HammerInput} from '../core';
 import {FocusOrigin, FocusOriginMonitor} from '../core/style/focus-origin-monitor';
 import {CanDisable, mixinDisabled} from '../core/common-behaviors/disabled';
 import {CanColor, mixinColor} from '../core/common-behaviors/color';
+import {Subscription} from 'rxjs/Subscription';
 
 
 /**
@@ -276,6 +277,9 @@ export class MdSlider extends _MdSliderMixinBase
    */
   _isActive: boolean = false;
 
+  /** Subscription to changes in the user's direction. */
+  private _dirChange: Subscription | undefined;
+
   /**
    * Whether the axis of the slider is inverted.
    * (i.e. whether moving the thumb in the positive x or y direction decreases the slider's value).
@@ -413,10 +417,18 @@ export class MdSlider extends _MdSliderMixinBase
     this._focusOriginMonitor
         .monitor(this._elementRef.nativeElement, renderer, true)
         .subscribe((origin: FocusOrigin) => this._isActive = !!origin && origin !== 'keyboard');
+
+    if (_dir) {
+      this._dirChange = _dir.change.subscribe(() => _changeDetectorRef.markForCheck());
+    }
   }
 
   ngOnDestroy() {
     this._focusOriginMonitor.stopMonitoring(this._elementRef.nativeElement);
+
+    if (this._dirChange) {
+      this._dirChange.unsubscribe();
+    }
   }
 
   _onMouseenter() {