diff --git a/src/lib/slider/slider.scss b/src/lib/slider/slider.scss index 3deb090a9c07..0806b9e3a313 100644 --- a/src/lib/slider/slider.scss +++ b/src/lib/slider/slider.scss @@ -457,3 +457,18 @@ $mat-slider-focus-ring-size: 30px !default; } } } + +// Slider inside a component with disabled animations. +.mat-slider._mat-animation-noopable { + .mat-slider-track-fill, + .mat-slider-track-background, + .mat-slider-ticks, + .mat-slider-thumb-container, + .mat-slider-focus-ring, + .mat-slider-thumb, + .mat-slider-thumb-label, + .mat-slider-thumb-label-text, + .mat-slider-has-ticks .mat-slider-wrapper::after { + transition: none; + } +} diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index 2684839ec101..5400d34fb48a 100644 --- a/src/lib/slider/slider.ts +++ b/src/lib/slider/slider.ts @@ -34,6 +34,7 @@ import { Output, ViewChild, ViewEncapsulation, + Inject, } from '@angular/core'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; import { @@ -46,6 +47,7 @@ import { mixinTabIndex, } from '@angular/material/core'; import {Subscription} from 'rxjs'; +import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; /** * Visually, a 30px separation between tick marks looks best. This is very subjective but it is @@ -126,6 +128,7 @@ export const _MatSliderMixinBase = '[class.mat-slider-vertical]': 'vertical', '[class.mat-slider-min-value]': '_isMinValue', '[class.mat-slider-hide-last-tick]': 'disabled || _isMinValue && _thumbGap && _invertAxis', + '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', }, templateUrl: 'slider.html', styleUrls: ['slider.css'], @@ -431,7 +434,9 @@ export class MatSlider extends _MatSliderMixinBase private _focusMonitor: FocusMonitor, private _changeDetectorRef: ChangeDetectorRef, @Optional() private _dir: Directionality, - @Attribute('tabindex') tabIndex: string) { + @Attribute('tabindex') tabIndex: string, + // @deletion-target 7.0.0 `_animationMode` parameter to be made required. + @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) { super(elementRef); this.tabIndex = parseInt(tabIndex) || 0;