diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts index 3bdeff346d13..01d3a2a65f23 100644 --- a/src/lib/slider/slider.spec.ts +++ b/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(); diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index 701c08b3396c..5cfca3cff978 100644 --- a/src/lib/slider/slider.ts +++ b/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() {