@angular/material 15.0.0-rc.0 → 15.0.0-rc.2

package/fesm2020/slider.mjs

@@ -1,19 +1,15 @@
-import * as i5 from '@angular/cdk/bidi';
-import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i3 from '@angular/cdk/platform';
-import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import * as i1 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/cdk/bidi';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i1 from '@angular/cdk/platform';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, EventEmitter, Directive, Output, Optional, ViewChildren, ContentChildren, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, ViewChild, Optional, ViewChildren, ContentChild, ContentChildren, forwardRef, EventEmitter, Directive, Output, NgModule } from '@angular/core';
 import * as i2 from '@angular/material/core';
 import { MatRipple, mixinColor, mixinDisableRipple, MAT_RIPPLE_GLOBAL_OPTIONS, MatCommonModule, MatRippleModule } from '@angular/material/core';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
-import { MDCSliderFoundation } from '@material/slider/foundation';
-import { Thumb, TickMark } from '@material/slider/types';
-import { Subject, fromEvent, Subscription } from 'rxjs';
-import { takeUntil, finalize, share } from 'rxjs/operators';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subject } from 'rxjs';
 
 /**
  * @license
@@ -23,51 +19,30 @@ import { takeUntil, finalize, share } from 'rxjs/operators';
  * found in the LICENSE file at https://angular.io/license
  */
 /**
- * Handles listening for all change and input events that occur on the document.
- *
- * This service exposes a single method #listen to allow users to subscribe to change and input
- * events that occur on the document. Since listening for these events can be expensive, we use
- * #fromEvent which will lazily attach a listener when the first subscription is made and remove the
- * listener once the last observer unsubscribes.
+ * Injection token that can be used for a `MatSlider` to provide itself as a
+ * parent to the `MatSliderThumb` and `MatSliderRangeThumb`.
+ * Used primarily to avoid circular imports.
+ * @docs-private
  */
-class GlobalChangeAndInputListener {
-    constructor(document, _ngZone) {
-        this._ngZone = _ngZone;
-        /** Stores the subjects that emit the events that occur on the global document. */
-        this._observables = new Map();
-        /** The notifier that triggers the global event observables to stop emitting and complete. */
-        this._destroyed = new Subject();
-        this._document = document;
-    }
-    ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
-        this._observables.clear();
-    }
-    /** Returns a subscription to global change or input events. */
-    listen(type, callback) {
-        // If this is the first time we are listening to this event, create the observable for it.
-        if (!this._observables.has(type)) {
-            this._observables.set(type, this._createGlobalEventObservable(type));
-        }
-        return this._ngZone.runOutsideAngular(() => this._observables
-            .get(type)
-            .subscribe((event) => this._ngZone.run(() => callback(event))));
-    }
-    /** Creates an observable that emits all events of the given type. */
-    _createGlobalEventObservable(type) {
-        return fromEvent(this._document, type, { capture: true, passive: true }).pipe(takeUntil(this._destroyed), finalize(() => this._observables.delete(type)), share());
-    }
-}
-GlobalChangeAndInputListener.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.0", ngImport: i0, type: GlobalChangeAndInputListener, deps: [{ token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-GlobalChangeAndInputListener.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0-rc.0", ngImport: i0, type: GlobalChangeAndInputListener, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.0", ngImport: i0, type: GlobalChangeAndInputListener, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.NgZone }]; } });
+const MAT_SLIDER = new InjectionToken('_MatSlider');
+/**
+ * Injection token that can be used to query for a `MatSliderThumb`.
+ * Used primarily to avoid circular imports.
+ * @docs-private
+ */
+const MAT_SLIDER_THUMB = new InjectionToken('_MatSliderThumb');
+/**
+ * Injection token that can be used to query for a `MatSliderRangeThumb`.
+ * Used primarily to avoid circular imports.
+ * @docs-private
+ */
+const MAT_SLIDER_RANGE_THUMB = new InjectionToken('_MatSliderRangeThumb');
+/**
+ * Injection token that can be used to query for a `MatSliderVisualThumb`.
+ * Used primarily to avoid circular imports.
+ * @docs-private
+ */
+const MAT_SLIDER_VISUAL_THUMB = new InjectionToken('_MatSliderVisualThumb');
 
 /**
  * @license
@@ -76,8 +51,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.0", ng
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-/** Options used to bind passive event listeners. */
-const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
 /**
  * The visual slider thumb.
  *
@@ -86,83 +59,90 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t
  * @docs-private
  */
 class MatSliderVisualThumb {
-    constructor(_ngZone, _slider, _elementRef) {
+    constructor(_cdr, _ngZone, _elementRef, _slider) {
+        this._cdr = _cdr;
         this._ngZone = _ngZone;
         this._slider = _slider;
-        this._elementRef = _elementRef;
-        /** Whether ripples on the slider thumb should be disabled. */
-        this.disableRipple = false;
-        /** Whether the slider thumb is currently being pressed. */
-        this._isActive = false;
         /** Whether the slider thumb is currently being hovered. */
         this._isHovered = false;
-        this._onMouseEnter = () => {
-            this._isHovered = true;
-            // We don't want to show the hover ripple on top of the focus ripple.
-            // This can happen if the user tabs to a thumb and then the user moves their cursor over it.
-            if (!this._isShowingRipple(this._focusRippleRef)) {
+        /** Whether the slider thumb is currently being pressed. */
+        this._isActive = false;
+        /** Whether the value indicator tooltip is visible. */
+        this._isValueIndicatorVisible = false;
+        this._onPointerMove = (event) => {
+            if (this._sliderInput._isFocused) {
+                return;
+            }
+            const rect = this._hostElement.getBoundingClientRect();
+            const isHovered = this._isSliderThumbHovered(event, rect);
+            this._isHovered = isHovered;
+            if (isHovered) {
                 this._showHoverRipple();
             }
+            else {
+                this._hideRipple(this._hoverRippleRef);
+            }
         };
         this._onMouseLeave = () => {
             this._isHovered = false;
-            this._hoverRippleRef?.fadeOut();
+            this._hideRipple(this._hoverRippleRef);
+        };
+        this._onFocus = () => {
+            // We don't want to show the hover ripple on top of the focus ripple.
+            // Happen when the users cursor is over a thumb and then the user tabs to it.
+            this._hideRipple(this._hoverRippleRef);
+            this._showFocusRipple();
+            this._hostElement.classList.add('mdc-slider__thumb--focused');
+        };
+        this._onBlur = () => {
+            // Happens when the user tabs away while still dragging a thumb.
+            if (!this._isActive) {
+                this._hideRipple(this._focusRippleRef);
+            }
+            // Happens when the user tabs away from a thumb but their cursor is still over it.
+            if (this._isHovered) {
+                this._showHoverRipple();
+            }
+            this._hostElement.classList.remove('mdc-slider__thumb--focused');
+        };
+        this._onDragStart = () => {
+            this._isActive = true;
+            this._showActiveRipple();
+        };
+        this._onDragEnd = () => {
+            this._isActive = false;
+            this._hideRipple(this._activeRippleRef);
+            // Happens when the user starts dragging a thumb, tabs away, and then stops dragging.
+            if (!this._sliderInput._isFocused) {
+                this._hideRipple(this._focusRippleRef);
+            }
         };
+        this._hostElement = _elementRef.nativeElement;
     }
     ngAfterViewInit() {
         this._ripple.radius = 24;
         this._sliderInput = this._slider._getInput(this.thumbPosition);
-        // Note that we don't unsubscribe from these, because they're complete on destroy.
-        this._sliderInput.dragStart.subscribe(event => this._onDragStart(event));
-        this._sliderInput.dragEnd.subscribe(event => this._onDragEnd(event));
-        this._sliderInput._focus.subscribe(() => this._onFocus());
-        this._sliderInput._blur.subscribe(() => this._onBlur());
-        // These two listeners don't update any data bindings so we bind them
-        // outside of the NgZone to prevent Angular from needlessly running change detection.
+        this._sliderInputEl = this._sliderInput._hostElement;
+        const input = this._sliderInputEl;
+        // These listeners don't update any data bindings so we bind them outside
+        // of the NgZone to prevent Angular from needlessly running change detection.
         this._ngZone.runOutsideAngular(() => {
-            this._elementRef.nativeElement.addEventListener('mouseenter', this._onMouseEnter);
-            this._elementRef.nativeElement.addEventListener('mouseleave', this._onMouseLeave);
+            input.addEventListener('pointermove', this._onPointerMove);
+            input.addEventListener('pointerdown', this._onDragStart);
+            input.addEventListener('pointerup', this._onDragEnd);
+            input.addEventListener('pointerleave', this._onMouseLeave);
+            input.addEventListener('focus', this._onFocus);
+            input.addEventListener('blur', this._onBlur);
         });
     }
     ngOnDestroy() {
-        this._elementRef.nativeElement.removeEventListener('mouseenter', this._onMouseEnter);
-        this._elementRef.nativeElement.removeEventListener('mouseleave', this._onMouseLeave);
-    }
-    /** Used to append a class to indicate when the value indicator text is short. */
-    _isShortValue() {
-        return this.valueIndicatorText?.length <= 2;
-    }
-    _onFocus() {
-        // We don't want to show the hover ripple on top of the focus ripple.
-        // Happen when the users cursor is over a thumb and then the user tabs to it.
-        this._hoverRippleRef?.fadeOut();
-        this._showFocusRipple();
-    }
-    _onBlur() {
-        // Happens when the user tabs away while still dragging a thumb.
-        if (!this._isActive) {
-            this._focusRippleRef?.fadeOut();
-        }
-        // Happens when the user tabs away from a thumb but their cursor is still over it.
-        if (this._isHovered) {
-            this._showHoverRipple();
-        }
-    }
-    _onDragStart(event) {
-        if (event.source._thumbPosition === this.thumbPosition) {
-            this._isActive = true;
-            this._showActiveRipple();
-        }
-    }
-    _onDragEnd(event) {
-        if (event.source._thumbPosition === this.thumbPosition) {
-            this._isActive = false;
-            this._activeRippleRef?.fadeOut();
-            // Happens when the user starts dragging a thumb, tabs away, and then stops dragging.
-            if (!this._sliderInput._isFocused()) {
-                this._focusRippleRef?.fadeOut();
-            }
-        }
+        const input = this._sliderInputEl;
+        input.removeEventListener('pointermove', this._onPointerMove);
+        input.removeEventListener('pointerdown', this._onDragStart);
+        input.removeEventListener('pointerup', this._onDragEnd);
+        input.removeEventListener('pointerleave', this._onMouseLeave);
+        input.removeEventListener('focus', this._onFocus);
+        input.removeEventListener('blur', this._onBlur);
     }
     /** Handles displaying the hover ripple. */
     _showHoverRipple() {
@@ -175,7 +155,7 @@ class MatSliderVisualThumb {
     _showFocusRipple() {
         // Show the focus ripple event if noop animations are enabled.
         if (!this._isShowingRipple(this._focusRippleRef)) {
-            this._focusRippleRef = this._showRipple({ enterDuration: 0, exitDuration: 0 });
+            this._focusRippleRef = this._showRipple({ enterDuration: 0, exitDuration: 0 }, true);
             this._focusRippleRef?.element.classList.add('mat-mdc-slider-focus-ripple');
         }
     }
@@ -191,8 +171,16 @@ class MatSliderVisualThumb {
         return rippleRef?.state === 0 /* RippleState.FADING_IN */ || rippleRef?.state === 1 /* RippleState.VISIBLE */;
     }
     /** Manually launches the slider thumb ripple using the specified ripple animation config. */
-    _showRipple(animation) {
-        if (this.disableRipple) {
+    _showRipple(animation, ignoreGlobalRippleConfig) {
+        if (this._slider.disabled) {
+            return;
+        }
+        this._showValueIndicator();
+        if (this._slider._isRange) {
+            const sibling = this._slider._getThumb(this.thumbPosition === 1 /* _MatThumb.START */ ? 2 /* _MatThumb.END */ : 1 /* _MatThumb.START */);
+            sibling._showValueIndicator();
+        }
+        if (this._slider._globalRippleOptions?.disabled && !ignoreGlobalRippleConfig) {
             return;
         }
         return this._ripple.launch({
@@ -201,43 +189,73 @@ class MatSliderVisualThumb {
             persistent: true,
         });
     }
-    /** Gets the hosts native HTML element. */
-    _getHostElement() {
-        return this._elementRef.nativeElement;
+    /**
+     * Fades out the given ripple.
+     * Also hides the value indicator if no ripple is showing.
+     */
+    _hideRipple(rippleRef) {
+        rippleRef?.fadeOut();
+        if (this._isShowingAnyRipple()) {
+            return;
+        }
+        if (!this._slider._isRange) {
+            this._hideValueIndicator();
+        }
+        const sibling = this._getSibling();
+        if (!sibling._isShowingAnyRipple()) {
+            this._hideValueIndicator();
+            sibling._hideValueIndicator();
+        }
+    }
+    /** Shows the value indicator ui. */
+    _showValueIndicator() {
+        this._hostElement.classList.add('mdc-slider__thumb--with-indicator');
+    }
+    /** Hides the value indicator ui. */
+    _hideValueIndicator() {
+        this._hostElement.classList.remove('mdc-slider__thumb--with-indicator');
+    }
+    _getSibling() {
+        return this._slider._getThumb(this.thumbPosition === 1 /* _MatThumb.START */ ? 2 /* _MatThumb.END */ : 1 /* _MatThumb.START */);
+    }
+    /** Gets the value indicator container's native HTML element. */
+    _getValueIndicatorContainer() {
+        return this._valueIndicatorContainer?.nativeElement;
     }
     /** Gets the native HTML element of the slider thumb knob. */
     _getKnob() {
         return this._knob.nativeElement;
     }
-    /**
-     * Gets the native HTML element of the slider thumb value indicator
-     * container.
-     */
-    _getValueIndicatorContainer() {
-        return this._valueIndicatorContainer.nativeElement;
+    _isShowingAnyRipple() {
+        return (this._isShowingRipple(this._hoverRippleRef) ||
+            this._isShowingRipple(this._focusRippleRef) ||
+            this._isShowingRipple(this._activeRippleRef));
+    }
+    _isSliderThumbHovered(event, rect) {
+        const radius = rect.width / 2;
+        const centerX = rect.x + radius;
+        const centerY = rect.y + radius;
+        const dx = event.clientX - centerX;
+        const dy = event.clientY - centerY;
+        return Math.pow(dx, 2) + Math.pow(dy, 2) < Math.pow(radius, 2);
     }
 }
-MatSliderVisualThumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.0", ngImport: i0, type: MatSliderVisualThumb, deps: [{ token: i0.NgZone }, { token: forwardRef(() => MatSlider) }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-MatSliderVisualThumb.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-rc.0", type: MatSliderVisualThumb, selector: "mat-slider-visual-thumb", inputs: { discrete: "discrete", thumbPosition: "thumbPosition", valueIndicatorText: "valueIndicatorText", disableRipple: "disableRipple" }, host: { properties: { "class.mdc-slider__thumb--short-value": "_isShortValue()" }, classAttribute: "mdc-slider__thumb mat-mdc-slider-visual-thumb" }, viewQueries: [{ propertyName: "_ripple", first: true, predicate: MatRipple, descendants: true }, { propertyName: "_knob", first: true, predicate: ["knob"], descendants: true }, { propertyName: "_valueIndicatorContainer", first: true, predicate: ["valueIndicatorContainer"], descendants: true }], ngImport: i0, template: "<div class=\"mdc-slider__value-indicator-container\" *ngIf=\"discrete\" #valueIndicatorContainer>\n  <div class=\"mdc-slider__value-indicator\">\n    <span class=\"mdc-slider__value-indicator-text\">{{valueIndicatorText}}</span>\n  </div>\n</div>\n<div class=\"mdc-slider__thumb-knob\" #knob></div>\n<div\n  matRipple\n  class=\"mat-mdc-focus-indicator\"\n  [matRippleDisabled]=\"true\"></div>\n", styles: [".mat-mdc-slider-visual-thumb .mat-ripple{height:100%;width:100%}"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.0", ngImport: i0, type: MatSliderVisualThumb, decorators: [{
+MatSliderVisualThumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSliderVisualThumb, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: MAT_SLIDER }], target: i0.ɵɵFactoryTarget.Component });
+MatSliderVisualThumb.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-rc.1", type: MatSliderVisualThumb, selector: "mat-slider-visual-thumb", inputs: { discrete: "discrete", thumbPosition: "thumbPosition", valueIndicatorText: "valueIndicatorText" }, host: { classAttribute: "mdc-slider__thumb mat-mdc-slider-visual-thumb" }, providers: [{ provide: MAT_SLIDER_VISUAL_THUMB, useExisting: MatSliderVisualThumb }], viewQueries: [{ propertyName: "_ripple", first: true, predicate: MatRipple, descendants: true }, { propertyName: "_knob", first: true, predicate: ["knob"], descendants: true }, { propertyName: "_valueIndicatorContainer", first: true, predicate: ["valueIndicatorContainer"], descendants: true }], ngImport: i0, template: "<div class=\"mdc-slider__value-indicator-container\" *ngIf=\"discrete\" #valueIndicatorContainer>\n  <div class=\"mdc-slider__value-indicator\">\n    <span class=\"mdc-slider__value-indicator-text\">{{valueIndicatorText}}</span>\n  </div>\n</div>\n<div class=\"mdc-slider__thumb-knob\" #knob></div>\n<div matRipple class=\"mat-mdc-focus-indicator\" [matRippleDisabled]=\"true\"></div>\n", styles: [".mat-mdc-slider-visual-thumb .mat-ripple{height:100%;width:100%}.mat-mdc-slider .mdc-slider__tick-marks{justify-content:start}.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--inactive{position:absolute;left:2px}"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSliderVisualThumb, decorators: [{
             type: Component,
             args: [{ selector: 'mat-slider-visual-thumb', host: {
                         'class': 'mdc-slider__thumb mat-mdc-slider-visual-thumb',
-                        // NOTE: This class is used internally.
-                        // TODO(wagnermaciel): Remove this once it is handled by the mdc foundation (cl/388828896).
-                        '[class.mdc-slider__thumb--short-value]': '_isShortValue()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mdc-slider__value-indicator-container\" *ngIf=\"discrete\" #valueIndicatorContainer>\n  <div class=\"mdc-slider__value-indicator\">\n    <span class=\"mdc-slider__value-indicator-text\">{{valueIndicatorText}}</span>\n  </div>\n</div>\n<div class=\"mdc-slider__thumb-knob\" #knob></div>\n<div\n  matRipple\n  class=\"mat-mdc-focus-indicator\"\n  [matRippleDisabled]=\"true\"></div>\n", styles: [".mat-mdc-slider-visual-thumb .mat-ripple{height:100%;width:100%}"] }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: MatSlider, decorators: [{
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: MAT_SLIDER_VISUAL_THUMB, useExisting: MatSliderVisualThumb }], template: "<div class=\"mdc-slider__value-indicator-container\" *ngIf=\"discrete\" #valueIndicatorContainer>\n  <div class=\"mdc-slider__value-indicator\">\n    <span class=\"mdc-slider__value-indicator-text\">{{valueIndicatorText}}</span>\n  </div>\n</div>\n<div class=\"mdc-slider__thumb-knob\" #knob></div>\n<div matRipple class=\"mat-mdc-focus-indicator\" [matRippleDisabled]=\"true\"></div>\n", styles: [".mat-mdc-slider-visual-thumb .mat-ripple{height:100%;width:100%}.mat-mdc-slider .mdc-slider__tick-marks{justify-content:start}.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--inactive{position:absolute;left:2px}"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [forwardRef(() => MatSlider)]
-                }] }, { type: i0.ElementRef }]; }, propDecorators: { discrete: [{
+                    args: [MAT_SLIDER]
+                }] }]; }, propDecorators: { discrete: [{
                 type: Input
             }], thumbPosition: [{
                 type: Input
             }], valueIndicatorText: [{
                 type: Input
-            }], disableRipple: [{
-                type: Input
             }], _ripple: [{
                 type: ViewChild,
                 args: [MatRipple]
@@ -248,258 +266,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.0", ng
                 type: ViewChild,
                 args: ['valueIndicatorContainer']
             }] } });
+
 /**
- * Directive that adds slider-specific behaviors to an input element inside `<mat-slider>`.
- * Up to two may be placed inside of a `<mat-slider>`.
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * If one is used, the selector `matSliderThumb` must be used, and the outcome will be a normal
- * slider. If two are used, the selectors `matSliderStartThumb` and `matSliderEndThumb` must be
- * used, and the outcome will be a range slider with two slider thumbs.
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
  */
-class MatSliderThumb {
-    constructor(document, _slider, _elementRef) {
-        this._slider = _slider;
-        this._elementRef = _elementRef;
-        /**
-         * Emits when the raw value of the slider changes. This is here primarily
-         * to facilitate the two-way binding for the `value` input.
-         * @docs-private
-         */
-        this.valueChange = new EventEmitter();
-        /** Event emitted when the slider thumb starts being dragged. */
-        this.dragStart = new EventEmitter();
-        /** Event emitted when the slider thumb stops being dragged. */
-        this.dragEnd = new EventEmitter();
-        /** Event emitted every time the MatSliderThumb is blurred. */
-        this._blur = new EventEmitter();
-        /** Event emitted every time the MatSliderThumb is focused. */
-        this._focus = new EventEmitter();
-        /**
-         * Used to determine the disabled state of the MatSlider (ControlValueAccessor).
-         * For ranged sliders, the disabled state of the MatSlider depends on the combined state of the
-         * start and end inputs. See MatSlider._updateDisabled.
-         */
-        this._disabled = false;
-        /**
-         * A callback function that is called when the
-         * control's value changes in the UI (ControlValueAccessor).
-         */
-        this._onChange = () => { };
-        /**
-         * A callback function that is called by the forms API on
-         * initialization to update the form model on blur (ControlValueAccessor).
-         */
-        this._onTouched = () => { };
-        /** Indicates which slider thumb this input corresponds to. */
-        this._thumbPosition = this._elementRef.nativeElement.hasAttribute('matSliderStartThumb')
-            ? Thumb.START
-            : Thumb.END;
-        this._document = document;
-        this._hostElement = _elementRef.nativeElement;
-    }
-    // ** IMPORTANT NOTE **
-    //
-    // The way `value` is implemented for MatSliderThumb doesn't follow typical Angular conventions.
-    // Normally we would define a private variable `_value` as the source of truth for the value of
-    // the slider thumb input. The source of truth for the value of the slider inputs has already
-    // been decided for us by MDC to be the value attribute on the slider thumb inputs. This is
-    // because the MDC foundation and adapter expect that the value attribute is the source of truth
-    // for the slider inputs.
-    //
-    // Also, note that the value attribute is completely disconnected from the value property.
-    /** The current value of this slider input. */
-    get value() {
-        return coerceNumberProperty(this._hostElement.getAttribute('value'));
-    }
-    set value(v) {
-        const value = coerceNumberProperty(v);
-        // If the foundation has already been initialized, we need to
-        // relay any value updates to it so that it can update the UI.
-        if (this._slider._initialized) {
-            this._slider._setValue(value, this._thumbPosition);
-        }
-        else {
-            // Setup for the MDC foundation.
-            this._hostElement.setAttribute('value', `${value}`);
-        }
-    }
-    ngOnInit() {
-        // By calling this in ngOnInit() we guarantee that the sibling sliders initial value by
-        // has already been set by the time we reach ngAfterViewInit().
-        this._initializeInputValueAttribute();
-        this._initializeAriaValueText();
-    }
-    ngAfterViewInit() {
-        this._initializeInputState();
-        this._initializeInputValueProperty();
-        // Setup for the MDC foundation.
-        if (this._slider.disabled) {
-            this._hostElement.disabled = true;
-        }
-    }
-    ngOnDestroy() {
-        this.dragStart.complete();
-        this.dragEnd.complete();
-        this._focus.complete();
-        this._blur.complete();
-        this.valueChange.complete();
-    }
-    _onBlur() {
-        this._onTouched();
-        this._blur.emit();
-    }
-    _emitFakeEvent(type) {
-        const event = new Event(type);
-        event._matIsHandled = true;
-        this._hostElement.dispatchEvent(event);
-    }
-    /**
-     * Sets the model value. Implemented as part of ControlValueAccessor.
-     * @param value
-     */
-    writeValue(value) {
-        this.value = value;
-    }
-    /**
-     * Registers a callback to be triggered when the value has changed.
-     * Implemented as part of ControlValueAccessor.
-     * @param fn Callback to be registered.
-     */
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    /**
-     * Registers a callback to be triggered when the component is touched.
-     * Implemented as part of ControlValueAccessor.
-     * @param fn Callback to be registered.
-     */
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    /**
-     * Sets whether the component should be disabled.
-     * Implemented as part of ControlValueAccessor.
-     * @param isDisabled
-     */
-    setDisabledState(isDisabled) {
-        this._disabled = isDisabled;
-        this._slider._updateDisabled();
-    }
-    focus() {
-        this._hostElement.focus();
-    }
-    blur() {
-        this._hostElement.blur();
-    }
-    /** Returns true if this slider input currently has focus. */
-    _isFocused() {
-        return this._document.activeElement === this._hostElement;
-    }
-    /**
-     * Sets the min, max, and step properties on the slider thumb input.
-     *
-     * Must be called AFTER the sibling slider thumb input is guaranteed to have had its value
-     * attribute value set. For a range slider, the min and max of the slider thumb input depends on
-     * the value of its sibling slider thumb inputs value.
-     *
-     * Must be called BEFORE the value property is set. In the case where the min and max have not
-     * yet been set and we are setting the input value property to a value outside of the native
-     * inputs default min or max. The value property would not be set to our desired value, but
-     * instead be capped at either the default min or max.
-     *
-     */
-    _initializeInputState() {
-        const min = this._hostElement.hasAttribute('matSliderEndThumb')
-            ? this._slider._getInput(Thumb.START).value
-            : this._slider.min;
-        const max = this._hostElement.hasAttribute('matSliderStartThumb')
-            ? this._slider._getInput(Thumb.END).value
-            : this._slider.max;
-        this._hostElement.min = `${min}`;
-        this._hostElement.max = `${max}`;
-        this._hostElement.step = `${this._slider.step}`;
-    }
-    /**
-     * Sets the value property on the slider thumb input.
-     *
-     * Must be called AFTER the min and max have been set. In the case where the min and max have not
-     * yet been set and we are setting the input value property to a value outside of the native
-     * inputs default min or max. The value property would not be set to our desired value, but
-     * instead be capped at either the default min or max.
-     */
-    _initializeInputValueProperty() {
-        this._hostElement.value = `${this.value}`;
-    }
-    /**
-     * Ensures the value attribute is initialized.
-     *
-     * Must be called BEFORE the min and max are set. For a range slider, the min and max of the
-     * slider thumb input depends on the value of its sibling slider thumb inputs value.
-     */
-    _initializeInputValueAttribute() {
-        // Only set the default value if an initial value has not already been provided.
-        if (!this._hostElement.hasAttribute('value')) {
-            this.value = this._hostElement.hasAttribute('matSliderEndThumb')
-                ? this._slider.max
-                : this._slider.min;
-        }
-    }
-    /**
-     * Initializes the aria-valuetext attribute.
-     *
-     * Must be called AFTER the value attribute is set. This is because the slider's parent
-     * `displayWith` function is used to set the `aria-valuetext` attribute.
-     */
-    _initializeAriaValueText() {
-        this._hostElement.setAttribute('aria-valuetext', this._slider.displayWith(this.value));
-    }
-}
-MatSliderThumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.0", ngImport: i0, type: MatSliderThumb, deps: [{ token: DOCUMENT }, { token: forwardRef(() => MatSlider) }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-MatSliderThumb.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-rc.0", type: MatSliderThumb, selector: "input[matSliderThumb], input[matSliderStartThumb], input[matSliderEndThumb]", inputs: { value: "value" }, outputs: { valueChange: "valueChange", dragStart: "dragStart", dragEnd: "dragEnd", _blur: "_blur", _focus: "_focus" }, host: { attributes: { "type": "range" }, listeners: { "blur": "_onBlur()", "focus": "_focus.emit()" }, classAttribute: "mdc-slider__input" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: MatSliderThumb,
-            multi: true,
-        },
-    ], exportAs: ["matSliderThumb"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.0", ngImport: i0, type: MatSliderThumb, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[matSliderThumb], input[matSliderStartThumb], input[matSliderEndThumb]',
-                    exportAs: 'matSliderThumb',
-                    host: {
-                        'class': 'mdc-slider__input',
-                        'type': 'range',
-                        '(blur)': '_onBlur()',
-                        '(focus)': '_focus.emit()',
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: MatSliderThumb,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: MatSlider, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => MatSlider)]
-                }] }, { type: i0.ElementRef }]; }, propDecorators: { value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], dragStart: [{
-                type: Output
-            }], dragEnd: [{
-                type: Output
-            }], _blur: [{
-                type: Output
-            }], _focus: [{
-                type: Output
-            }] } });
+// TODO(wagnermaciel): maybe handle the following edge case:
+// 1. start dragging discrete slider
+// 2. tab to disable checkbox
+// 3. without ending drag, disable the slider
 // Boilerplate for applying mixins to MatSlider.
 const _MatSliderMixinBase = mixinColor(mixinDisableRipple(class {
     constructor(_elementRef) {
@@ -511,12 +289,11 @@ const _MatSliderMixinBase = mixinColor(mixinDisableRipple(class {
  * behavior to the native `<input type="range">` element.
  */
 class MatSlider extends _MatSliderMixinBase {
-    constructor(_ngZone, _cdr, elementRef, _platform, _globalChangeAndInputListener, document, _dir, _globalRippleOptions, animationMode) {
+    constructor(_ngZone, _cdr, _platform, elementRef, _dir, _globalRippleOptions, animationMode) {
         super(elementRef);
         this._ngZone = _ngZone;
         this._cdr = _cdr;
         this._platform = _platform;
-        this._globalChangeAndInputListener = _globalChangeAndInputListener;
         this._dir = _dir;
         this._globalRippleOptions = _globalRippleOptions;
         this._disabled = false;
@@ -524,39 +301,49 @@ class MatSlider extends _MatSliderMixinBase {
         this._showTickMarks = false;
         this._min = 0;
         this._max = 100;
-        this._step = 1;
+        this._step = 0;
         /**
          * Function that will be used to format the value before it is displayed
          * in the thumb label. Can be used to format very large number in order
          * for them to fit into the slider thumb.
          */
         this.displayWith = (value) => `${value}`;
-        /** Instance of the MDC slider foundation for this slider. */
-        this._foundation = new MDCSliderFoundation(new SliderAdapter(this));
-        /** Whether the foundation has been initialized. */
-        this._initialized = false;
+        this._rippleRadius = 24;
+        // The value indicator tooltip text for the visual slider thumb(s).
+        this.startValueIndicatorText = '';
+        this.endValueIndicatorText = '';
+        this._isRange = false;
+        /** Whether the slider is rtl. */
+        this._isRtl = false;
         /**
-         * Whether the browser supports pointer events.
-         *
-         * We exclude iOS to mirror the MDC Foundation. The MDC Foundation cannot use pointer events on
-         * iOS because of this open bug - https://bugs.webkit.org/show_bug.cgi?id=220196.
+         * The width of the tick mark track.
+         * The tick mark track width is different from full track width
          */
-        this._SUPPORTS_POINTER_EVENTS = typeof PointerEvent !== 'undefined' && !!PointerEvent && !this._platform.IOS;
-        /** Wrapper function for calling layout (needed for adding & removing an event listener). */
-        this._layout = () => this._foundation.layout();
-        this._document = document;
-        this._window = this._document.defaultView || window;
+        this._tickMarkTrackWidth = 0;
+        this._hasAnimation = false;
+        this._resizeTimer = null;
+        /** The radius of the native slider's knob. AFAIK there is no way to avoid hardcoding this. */
+        this._knobRadius = 8;
+        /** Whether or not the slider thumbs overlap. */
+        this._thumbsOverlap = false;
         this._noopAnimations = animationMode === 'NoopAnimations';
         this._dirChangeSubscription = this._dir.change.subscribe(() => this._onDirChange());
-        this._attachUISyncEventListener();
+        this._isRtl = this._dir.value === 'rtl';
     }
     /** Whether the slider is disabled. */
     get disabled() {
         return this._disabled;
     }
     set disabled(v) {
-        this._setDisabled(coerceBooleanProperty(v));
-        this._updateInputsDisabledState();
+        this._disabled = coerceBooleanProperty(v);
+        const endInput = this._getInput(2 /* _MatThumb.END */);
+        const startInput = this._getInput(1 /* _MatThumb.START */);
+        if (endInput) {
+            endInput.disabled = this._disabled;
+        }
+        if (startInput) {
+            startInput.disabled = this._disabled;
+        }
     }
     /** Whether the slider displays a numeric value label upon pressing the thumb. */
     get discrete() {
@@ -577,261 +364,526 @@ class MatSlider extends _MatSliderMixinBase {
         return this._min;
     }
     set min(v) {
-        this._min = coerceNumberProperty(v, this._min);
-        this._reinitialize();
+        const min = coerceNumberProperty(v, this._min);
+        if (this._min !== min) {
+            this._updateMin(min);
+        }
+    }
+    _updateMin(min) {
+        const prevMin = this._min;
+        this._min = min;
+        this._isRange ? this._updateMinRange({ old: prevMin, new: min }) : this._updateMinNonRange(min);
+        this._onMinMaxOrStepChange();
+    }
+    _updateMinRange(min) {
+        const endInput = this._getInput(2 /* _MatThumb.END */);
+        const startInput = this._getInput(1 /* _MatThumb.START */);
+        const oldEndValue = endInput.value;
+        const oldStartValue = startInput.value;
+        startInput.min = min.new;
+        endInput.min = Math.max(min.new, startInput.value);
+        startInput.max = Math.min(endInput.max, endInput.value);
+        startInput._updateWidthInactive();
+        endInput._updateWidthInactive();
+        min.new < min.old
+            ? this._onTranslateXChangeBySideEffect(endInput, startInput)
+            : this._onTranslateXChangeBySideEffect(startInput, endInput);
+        if (oldEndValue !== endInput.value) {
+            this._onValueChange(endInput);
+        }
+        if (oldStartValue !== startInput.value) {
+            this._onValueChange(startInput);
+        }
+    }
+    _updateMinNonRange(min) {
+        const input = this._getInput(2 /* _MatThumb.END */);
+        if (input) {
+            const oldValue = input.value;
+            input.min = min;
+            input._updateThumbUIByValue();
+            this._updateTrackUI(input);
+            if (oldValue !== input.value) {
+                this._onValueChange(input);
+            }
+        }
     }
     /** The maximum value that the slider can have. */
     get max() {
         return this._max;
     }
     set max(v) {
-        this._max = coerceNumberProperty(v, this._max);
-        this._reinitialize();
+        const max = coerceNumberProperty(v, this._max);
+        if (this._max !== max) {
+            this._updateMax(max);
+        }
+    }
+    _updateMax(max) {
+        const prevMax = this._max;
+        this._max = max;
+        this._isRange ? this._updateMaxRange({ old: prevMax, new: max }) : this._updateMaxNonRange(max);
+        this._onMinMaxOrStepChange();
+    }
+    _updateMaxRange(max) {
+        const endInput = this._getInput(2 /* _MatThumb.END */);
+        const startInput = this._getInput(1 /* _MatThumb.START */);
+        const oldEndValue = endInput.value;
+        const oldStartValue = startInput.value;
+        endInput.max = max.new;
+        startInput.max = Math.min(max.new, endInput.value);
+        endInput.min = startInput.value;
+        endInput._updateWidthInactive();
+        startInput._updateWidthInactive();
+        max.new > max.old
+            ? this._onTranslateXChangeBySideEffect(startInput, endInput)
+            : this._onTranslateXChangeBySideEffect(endInput, startInput);
+        if (oldEndValue !== endInput.value) {
+            this._onValueChange(endInput);
+        }
+        if (oldStartValue !== startInput.value) {
+            this._onValueChange(startInput);
+        }
+    }
+    _updateMaxNonRange(max) {
+        const input = this._getInput(2 /* _MatThumb.END */);
+        if (input) {
+            const oldValue = input.value;
+            input.max = max;
+            input._updateThumbUIByValue();
+            this._updateTrackUI(input);
+            if (oldValue !== input.value) {
+                this._onValueChange(input);
+            }
+        }
     }
     /** The values at which the thumb will snap. */
     get step() {
         return this._step;
     }
     set step(v) {
-        this._step = coerceNumberProperty(v, this._step);
-        this._reinitialize();
+        const step = coerceNumberProperty(v, this._step);
+        if (this._step !== step) {
+            this._updateStep(step);
+        }
+    }
+    _updateStep(step) {
+        this._step = step;
+        this._isRange ? this._updateStepRange() : this._updateStepNonRange();
+        this._onMinMaxOrStepChange();
+    }
+    _updateStepRange() {
+        const endInput = this._getInput(2 /* _MatThumb.END */);
+        const startInput = this._getInput(1 /* _MatThumb.START */);
+        const oldEndValue = endInput.value;
+        const oldStartValue = startInput.value;
+        const prevStartValue = startInput.value;
+        endInput.min = this._min;
+        startInput.max = this._max;
+        endInput.step = this._step;
+        startInput.step = this._step;
+        if (this._platform.SAFARI) {
+            endInput.value = endInput.value;
+            startInput.value = startInput.value;
+        }
+        endInput.min = Math.max(this._min, startInput.value);
+        startInput.max = Math.min(this._max, endInput.value);
+        startInput._updateWidthInactive();
+        endInput._updateWidthInactive();
+        endInput.value < prevStartValue
+            ? this._onTranslateXChangeBySideEffect(startInput, endInput)
+            : this._onTranslateXChangeBySideEffect(endInput, startInput);
+        if (oldEndValue !== endInput.value) {
+            this._onValueChange(endInput);
+        }
+        if (oldStartValue !== startInput.value) {
+            this._onValueChange(startInput);
+        }
+    }
+    _updateStepNonRange() {
+        const input = this._getInput(2 /* _MatThumb.END */);
+        if (input) {
+            const oldValue = input.value;
+            input.step = this._step;
+            if (this._platform.SAFARI) {
+                input.value = input.value;
+            }
+            input._updateThumbUIByValue();
+            if (oldValue !== input.value) {
+                this._onValueChange(input);
+            }
+        }
     }
     ngAfterViewInit() {
+        if (this._platform.isBrowser) {
+            this._updateDimensions();
+        }
+        const eInput = this._getInput(2 /* _MatThumb.END */);
+        const sInput = this._getInput(1 /* _MatThumb.START */);
+        this._isRange = !!eInput && !!sInput;
         if (typeof ngDevMode === 'undefined' || ngDevMode) {
-            _validateThumbs(this._isRange(), this._getThumb(Thumb.START), this._getThumb(Thumb.END));
-            _validateInputs(this._isRange(), this._getInputElement(Thumb.START), this._getInputElement(Thumb.END));
+            _validateInputs(this._isRange, this._getInput(2 /* _MatThumb.END */), this._getInput(1 /* _MatThumb.START */));
         }
-        if (this._platform.isBrowser) {
-            this._foundation.init();
-            this._foundation.layout();
-            this._initialized = true;
-            this._observeHostResize();
-        }
-        // The MDC foundation requires access to the view and content children of the MatSlider. In
-        // order to access the view and content children of MatSlider we need to wait until change
-        // detection runs and materializes them. That is why we call init() and layout() in
-        // ngAfterViewInit().
-        //
-        // The MDC foundation then uses the information it gathers from the DOM to compute an initial
-        // value for the tickMarks array. It then tries to update the component data, but because it is
-        // updating the component data AFTER change detection already ran, we will get a changed after
-        // checked error. Because of this, we need to force change detection to update the UI with the
-        // new state.
+        const thumb = this._getThumb(2 /* _MatThumb.END */);
+        this._rippleRadius = thumb._ripple.radius;
+        this._inputPadding = this._rippleRadius - this._knobRadius;
+        this._inputOffset = this._knobRadius;
+        if (eInput) {
+            eInput.initProps();
+            eInput.initUI();
+        }
+        if (sInput) {
+            sInput.initProps();
+            sInput.initUI();
+        }
+        if (this._isRange) {
+            eInput._updateMinMax();
+            sInput._updateMinMax();
+        }
+        this._updateTrackUI(eInput);
+        this._updateTickMarkUI();
+        this._updateTickMarkTrackUI();
+        this._observeHostResize();
         this._cdr.detectChanges();
     }
     ngOnDestroy() {
-        if (this._platform.isBrowser) {
-            this._foundation.destroy();
-        }
         this._dirChangeSubscription.unsubscribe();
         this._resizeObserver?.disconnect();
         this._resizeObserver = null;
-        clearTimeout(this._resizeTimer);
-        this._removeUISyncEventListener();
-    }
-    /** Returns true if the language direction for this slider element is right to left. */
-    _isRTL() {
-        return this._dir && this._dir.value === 'rtl';
     }
-    /**
-     * Attaches an event listener that keeps sync the slider UI and the foundation in sync.
-     *
-     * Because the MDC Foundation stores the value of the bounding client rect when layout is called,
-     * we need to keep calling layout to avoid the position of the slider getting out of sync with
-     * what the foundation has stored. If we don't do this, the foundation will not be able to
-     * correctly calculate the slider value on click/slide.
-     */
-    _attachUISyncEventListener() {
-        // Implementation detail: It may seem weird that we are using "mouseenter" instead of
-        // "mousedown" as the default for when a browser does not support pointer events. While we
-        // would prefer to use "mousedown" as the default, for some reason it does not work (the
-        // callback is never triggered).
-        if (this._SUPPORTS_POINTER_EVENTS) {
-            this._elementRef.nativeElement.addEventListener('pointerdown', this._layout);
-        }
-        else {
-            this._elementRef.nativeElement.addEventListener('mouseenter', this._layout);
-            this._elementRef.nativeElement.addEventListener('touchstart', this._layout, passiveEventListenerOptions);
-        }
+    /** Handles updating the slider ui after a dir change. */
+    _onDirChange() {
+        this._isRtl = this._dir.value === 'rtl';
+        this._isRange ? this._onDirChangeRange() : this._onDirChangeNonRange();
+        this._updateTickMarkUI();
+    }
+    _onDirChangeRange() {
+        const endInput = this._getInput(2 /* _MatThumb.END */);
+        const startInput = this._getInput(1 /* _MatThumb.START */);
+        endInput._setIsLeftThumb();
+        startInput._setIsLeftThumb();
+        endInput.translateX = endInput._calcTranslateXByValue();
+        startInput.translateX = startInput._calcTranslateXByValue();
+        endInput._updateStaticStyles();
+        startInput._updateStaticStyles();
+        endInput._updateWidthInactive();
+        startInput._updateWidthInactive();
+        endInput._updateThumbUIByValue();
+        startInput._updateThumbUIByValue();
+    }
+    _onDirChangeNonRange() {
+        const input = this._getInput(2 /* _MatThumb.END */);
+        input._updateThumbUIByValue();
     }
-    /** Removes the event listener that keeps sync the slider UI and the foundation in sync. */
-    _removeUISyncEventListener() {
-        if (this._SUPPORTS_POINTER_EVENTS) {
-            this._elementRef.nativeElement.removeEventListener('pointerdown', this._layout);
-        }
-        else {
-            this._elementRef.nativeElement.removeEventListener('mouseenter', this._layout);
-            this._elementRef.nativeElement.removeEventListener('touchstart', this._layout, passiveEventListenerOptions);
+    /** Starts observing and updating the slider if the host changes its size. */
+    _observeHostResize() {
+        if (typeof ResizeObserver === 'undefined' || !ResizeObserver) {
+            return;
         }
-    }
-    /**
-     * Reinitializes the slider foundation and input state(s).
-     *
-     * The MDC Foundation does not support changing some slider attributes after it has been
-     * initialized (e.g. min, max, and step). To continue supporting this feature, we need to
-     * destroy the foundation and re-initialize everything whenever we make these changes.
-     */
-    _reinitialize() {
-        if (this._initialized) {
-            this._foundation.destroy();
-            if (this._isRange()) {
-                this._getInput(Thumb.START)._initializeInputState();
-            }
-            this._getInput(Thumb.END)._initializeInputState();
-            this._foundation.init();
-            this._foundation.layout();
-        }
-    }
-    /** Handles updating the slider foundation after a dir change. */
-    _onDirChange() {
         this._ngZone.runOutsideAngular(() => {
-            // We need to call layout() a few milliseconds after the dir change callback
-            // because we need to wait until the bounding client rect of the slider has updated.
-            setTimeout(() => this._foundation.layout(), 10);
+            this._resizeObserver = new ResizeObserver(() => {
+                if (this._isActive()) {
+                    return;
+                }
+                if (this._resizeTimer) {
+                    clearTimeout(this._resizeTimer);
+                }
+                this._onResize();
+            });
+            this._resizeObserver.observe(this._elementRef.nativeElement);
         });
     }
-    /** Sets the value of a slider thumb. */
-    _setValue(value, thumbPosition) {
-        thumbPosition === Thumb.START
-            ? this._foundation.setValueStart(value)
-            : this._foundation.setValue(value);
-    }
-    /** Sets the disabled state of the MatSlider. */
-    _setDisabled(value) {
-        this._disabled = value;
-        // If we want to disable the slider after the foundation has been initialized,
-        // we need to inform the foundation by calling `setDisabled`. Also, we can't call
-        // this before initializing the foundation because it will throw errors.
-        if (this._initialized) {
-            this._foundation.setDisabled(value);
-        }
-    }
-    /** Sets the disabled state of the individual slider thumb(s) (ControlValueAccessor). */
-    _updateInputsDisabledState() {
-        if (this._initialized) {
-            this._getInput(Thumb.END)._disabled = true;
-            if (this._isRange()) {
-                this._getInput(Thumb.START)._disabled = true;
-            }
-        }
-    }
-    /** Whether this is a ranged slider. */
-    _isRange() {
-        return this._inputs.length === 2;
-    }
-    /** Sets the disabled state based on the disabled state of the inputs (ControlValueAccessor). */
-    _updateDisabled() {
-        const disabled = this._inputs?.some(input => input._disabled) || false;
-        this._setDisabled(disabled);
-    }
-    /** Gets the slider thumb input of the given thumb position. */
-    _getInput(thumbPosition) {
-        return thumbPosition === Thumb.END ? this._inputs?.last : this._inputs?.first;
-    }
-    /** Gets the slider thumb HTML input element of the given thumb position. */
-    _getInputElement(thumbPosition) {
-        return this._getInput(thumbPosition)?._hostElement;
+    /** Whether any of the thumbs are currently active. */
+    _isActive() {
+        return this._getThumb(1 /* _MatThumb.START */)._isActive || this._getThumb(2 /* _MatThumb.END */)._isActive;
     }
-    _getThumb(thumbPosition) {
-        return thumbPosition === Thumb.END ? this._thumbs?.last : this._thumbs?.first;
+    _getValue(thumbPosition = 2 /* _MatThumb.END */) {
+        const input = this._getInput(thumbPosition);
+        if (!input) {
+            return this.min;
+        }
+        return input.value;
+    }
+    _skipUpdate() {
+        return !!(this._getInput(1 /* _MatThumb.START */)?._skipUIUpdate || this._getInput(2 /* _MatThumb.END */)?._skipUIUpdate);
+    }
+    /** Stores the slider dimensions. */
+    _updateDimensions() {
+        const rect = this._elementRef.nativeElement.getBoundingClientRect();
+        this._cachedWidth = rect.width;
+        this._cachedLeft = rect.left;
+    }
+    /** Sets the styles for the active portion of the track. */
+    _setTrackActiveStyles(styles) {
+        const trackStyle = this._trackActive.nativeElement.style;
+        trackStyle.left = styles.left;
+        trackStyle.right = styles.right;
+        trackStyle.transform = styles.transform;
+        trackStyle.transformOrigin = styles.transformOrigin;
+    }
+    /** Returns the translateX positioning for a tick mark based on it's index. */
+    _calcTickMarkTransform(index) {
+        // TODO(wagnermaciel): See if we can avoid doing this and just using flex to position these.
+        const translateX = index * (this._tickMarkTrackWidth / (this._tickMarks.length - 1));
+        return `translateX(${translateX}px`;
+    }
+    // Handlers for updating the slider ui.
+    _onTranslateXChange(source) {
+        this._updateThumbUI(source);
+        this._updateTrackUI(source);
+        this._updateOverlappingThumbUI(source);
+    }
+    _onTranslateXChangeBySideEffect(input1, input2) {
+        input1._updateThumbUIByValue();
+        input2._updateThumbUIByValue();
+    }
+    _onValueChange(source) {
+        this._updateValueIndicatorUI(source);
+        this._updateTickMarkUI();
+        this._cdr.detectChanges();
     }
-    /** Gets the slider thumb HTML element of the given thumb position. */
-    _getThumbElement(thumbPosition) {
-        return this._getThumb(thumbPosition)?._getHostElement();
+    _onMinMaxOrStepChange() {
+        this._updateTickMarkUI();
+        this._updateTickMarkTrackUI();
+        this._cdr.markForCheck();
     }
-    /** Gets the slider knob HTML element of the given thumb position. */
-    _getKnobElement(thumbPosition) {
-        return this._getThumb(thumbPosition)?._getKnob();
+    _onResize() {
+        this._updateDimensions();
+        if (this._isRange) {
+            const eInput = this._getInput(2 /* _MatThumb.END */);
+            const sInput = this._getInput(1 /* _MatThumb.START */);
+            eInput._updateThumbUIByValue();
+            sInput._updateThumbUIByValue();
+            eInput._updateStaticStyles();
+            sInput._updateStaticStyles();
+            eInput._updateMinMax();
+            sInput._updateMinMax();
+            eInput._updateWidthInactive();
+            sInput._updateWidthInactive();
+        }
+        else {
+            const eInput = this._getInput(2 /* _MatThumb.END */);
+            if (eInput) {
+                eInput._updateThumbUIByValue();
+            }
+        }
+        this._updateTickMarkUI();
+        this._updateTickMarkTrackUI();
+        this._cdr.detectChanges();
     }
-    /**
-     * Gets the slider value indicator container HTML element of the given thumb
-     * position.
-     */
-    _getValueIndicatorContainerElement(thumbPosition) {
-        return this._getThumb(thumbPosition)._getValueIndicatorContainer();
+    /** Returns true if the slider knobs are overlapping one another. */
+    _areThumbsOverlapping() {
+        const startInput = this._getInput(1 /* _MatThumb.START */);
+        const endInput = this._getInput(2 /* _MatThumb.END */);
+        if (!startInput || !endInput) {
+            return false;
+        }
+        return endInput.translateX - startInput.translateX < 20;
     }
     /**
-     * Sets the value indicator text of the given thumb position using the given value.
-     *
-     * Uses the `displayWith` function if one has been provided. Otherwise, it just uses the
-     * numeric value as a string.
+     * Updates the class names of overlapping slider thumbs so
+     * that the current active thumb is styled to be on "top".
      */
-    _setValueIndicatorText(value, thumbPosition) {
-        thumbPosition === Thumb.START
-            ? (this._startValueIndicatorText = this.displayWith(value))
-            : (this._endValueIndicatorText = this.displayWith(value));
-        this._cdr.markForCheck();
+    _updateOverlappingThumbClassNames(source) {
+        const sibling = source.getSibling();
+        const sourceThumb = this._getThumb(source.thumbPosition);
+        const siblingThumb = this._getThumb(sibling.thumbPosition);
+        siblingThumb._hostElement.classList.remove('mdc-slider__thumb--top');
+        sourceThumb._hostElement.classList.toggle('mdc-slider__thumb--top', this._thumbsOverlap);
+    }
+    /** Updates the UI of slider thumbs when they begin or stop overlapping. */
+    _updateOverlappingThumbUI(source) {
+        if (!this._isRange || this._skipUpdate()) {
+            return;
+        }
+        if (this._thumbsOverlap !== this._areThumbsOverlapping()) {
+            this._thumbsOverlap = !this._thumbsOverlap;
+            this._updateOverlappingThumbClassNames(source);
+        }
     }
-    /** Gets the value indicator text for the given thumb position. */
-    _getValueIndicatorText(thumbPosition) {
-        return thumbPosition === Thumb.START
-            ? this._startValueIndicatorText
-            : this._endValueIndicatorText;
+    // _MatThumb styles update conditions
+    //
+    // 1. TranslateX, resize, or dir change
+    //    - Reason: The thumb styles need to be updated according to the new translateX.
+    // 2. Min, max, or step
+    //    - Reason: The value may have silently changed.
+    /** Updates the translateX of the given thumb. */
+    _updateThumbUI(source) {
+        if (this._skipUpdate()) {
+            return;
+        }
+        const thumb = this._getThumb(source.thumbPosition === 2 /* _MatThumb.END */ ? 2 /* _MatThumb.END */ : 1 /* _MatThumb.START */);
+        thumb._hostElement.style.transform = `translateX(${source.translateX}px)`;
     }
-    /** Determines the class name for a HTML element. */
-    _getTickMarkClass(tickMark) {
-        return tickMark === TickMark.ACTIVE
-            ? 'mdc-slider__tick-mark--active'
-            : 'mdc-slider__tick-mark--inactive';
+    // Value indicator text update conditions
+    //
+    // 1. Value
+    //    - Reason: The value displayed needs to be updated.
+    // 2. Min, max, or step
+    //    - Reason: The value may have silently changed.
+    /** Updates the value indicator tooltip ui for the given thumb. */
+    _updateValueIndicatorUI(source) {
+        if (this._skipUpdate()) {
+            return;
+        }
+        const valuetext = this.displayWith(source.value);
+        source._valuetext = valuetext;
+        if (this.discrete) {
+            source.thumbPosition === 1 /* _MatThumb.START */
+                ? (this.startValueIndicatorText = valuetext)
+                : (this.endValueIndicatorText = valuetext);
+            const visualThumb = this._getThumb(source.thumbPosition);
+            valuetext.length < 3
+                ? visualThumb._hostElement.classList.add('mdc-slider__thumb--short-value')
+                : visualThumb._hostElement.classList.remove('mdc-slider__thumb--short-value');
+        }
     }
-    /** Whether the slider thumb ripples should be disabled. */
-    _isRippleDisabled() {
-        return this.disabled || this.disableRipple || !!this._globalRippleOptions?.disabled;
+    // Update Tick Mark Track Width
+    //
+    // 1. Min, max, or step
+    //    - Reason: The maximum reachable value may have changed.
+    //    - Side note: The maximum reachable value is different from the maximum value set by the
+    //      user. For example, a slider with [min: 5, max: 100, step: 10] would have a maximum
+    //      reachable value of 95.
+    // 2. Resize
+    //    - Reason: The position for the maximum reachable value needs to be recalculated.
+    /** Updates the width of the tick mark track. */
+    _updateTickMarkTrackUI() {
+        if (this._skipUpdate()) {
+            return;
+        }
+        const step = this._step && this._step > 0 ? this._step : 1;
+        const maxValue = Math.floor(this.max / step) * step;
+        const percentage = (maxValue - this.min) / (this.max - this.min);
+        this._tickMarkTrackWidth = this._cachedWidth * percentage - 6;
     }
-    /** Gets the dimensions of the host element. */
-    _getHostDimensions() {
-        return this._cachedHostRect || this._elementRef.nativeElement.getBoundingClientRect();
+    // Track active update conditions
+    //
+    // 1. TranslateX
+    //    - Reason: The track active should line up with the new thumb position.
+    // 2. Min or max
+    //    - Reason #1: The 'active' percentage needs to be recalculated.
+    //    - Reason #2: The value may have silently changed.
+    // 3. Step
+    //    - Reason: The value may have silently changed causing the thumb(s) to shift.
+    // 4. Dir change
+    //    - Reason: The track active will need to be updated according to the new thumb position(s).
+    // 5. Resize
+    //    - Reason: The total width the 'active' tracks translateX is based on has changed.
+    /** Updates the scale on the active portion of the track. */
+    _updateTrackUI(source) {
+        if (this._skipUpdate()) {
+            return;
+        }
+        this._isRange
+            ? this._updateTrackUIRange(source)
+            : this._updateTrackUINonRange(source);
     }
-    /** Starts observing and updating the slider if the host changes its size. */
-    _observeHostResize() {
-        if (typeof ResizeObserver === 'undefined' || !ResizeObserver) {
+    _updateTrackUIRange(source) {
+        const sibling = source.getSibling();
+        if (!sibling || !this._cachedWidth) {
             return;
         }
-        // MDC only updates the slider when the window is resized which
-        // doesn't capture changes of the container itself. We use a resize
-        // observer to ensure that the layout is correct (see #24590 and #25286).
-        this._ngZone.runOutsideAngular(() => {
-            this._resizeObserver = new ResizeObserver(entries => {
-                // Triggering a layout while the user is dragging can throw off the alignment.
-                if (this._isActive()) {
-                    return;
-                }
-                clearTimeout(this._resizeTimer);
-                this._resizeTimer = setTimeout(() => {
-                    // The `layout` call is going to call `getBoundingClientRect` to update the dimensions
-                    // of the host. Since the `ResizeObserver` already calculated them, we can save some
-                    // work by returning them instead of having to check the DOM again.
-                    if (!this._isActive()) {
-                        this._cachedHostRect = entries[0]?.contentRect;
-                        this._layout();
-                        this._cachedHostRect = null;
-                    }
-                }, 50);
+        const activePercentage = Math.abs(sibling.translateX - source.translateX) / this._cachedWidth;
+        if (source._isLeftThumb && this._cachedWidth) {
+            this._setTrackActiveStyles({
+                left: 'auto',
+                right: `${this._cachedWidth - sibling.translateX}px`,
+                transformOrigin: 'right',
+                transform: `scaleX(${activePercentage})`,
             });
-            this._resizeObserver.observe(this._elementRef.nativeElement);
-        });
+        }
+        else {
+            this._setTrackActiveStyles({
+                left: `${sibling.translateX}px`,
+                right: 'auto',
+                transformOrigin: 'left',
+                transform: `scaleX(${activePercentage})`,
+            });
+        }
     }
-    /** Whether any of the thumbs are currently active. */
-    _isActive() {
-        return this._getThumb(Thumb.START)._isActive || this._getThumb(Thumb.END)._isActive;
+    _updateTrackUINonRange(source) {
+        this._isRtl
+            ? this._setTrackActiveStyles({
+                left: 'auto',
+                right: '0px',
+                transformOrigin: 'right',
+                transform: `scaleX(${1 - source.fillPercentage})`,
+            })
+            : this._setTrackActiveStyles({
+                left: '0px',
+                right: 'auto',
+                transformOrigin: 'left',
+                transform: `scaleX(${source.fillPercentage})`,
+            });
+    }
+    // Tick mark update conditions
+    //
+    // 1. Value
+    //    - Reason: a tick mark which was once active might now be inactive or vice versa.
+    // 2. Min, max, or step
+    //    - Reason #1: the number of tick marks may have changed.
+    //    - Reason #2: The value may have silently changed.
+    /** Updates the dots along the slider track. */
+    _updateTickMarkUI() {
+        if (this.step === undefined || this.min === undefined || this.max === undefined) {
+            return;
+        }
+        const step = this.step > 0 ? this.step : 1;
+        this._isRange ? this._updateTickMarkUIRange(step) : this._updateTickMarkUINonRange(step);
+        if (this._isRtl) {
+            this._tickMarks.reverse();
+        }
+    }
+    _updateTickMarkUINonRange(step) {
+        const value = this._getValue();
+        let numActive = Math.max(Math.round((value - this.min) / step), 0);
+        let numInactive = Math.max(Math.round((this.max - value) / step), 0);
+        this._isRtl ? numActive++ : numInactive++;
+        this._tickMarks = Array(numActive)
+            .fill(0 /* _MatTickMark.ACTIVE */)
+            .concat(Array(numInactive).fill(1 /* _MatTickMark.INACTIVE */));
+    }
+    _updateTickMarkUIRange(step) {
+        const endValue = this._getValue();
+        const startValue = this._getValue(1 /* _MatThumb.START */);
+        const numInactiveBeforeStartThumb = Math.max(Math.floor((startValue - this.min) / step), 0);
+        const numActive = Math.max(Math.floor((endValue - startValue) / step) + 1, 0);
+        const numInactiveAfterEndThumb = Math.max(Math.floor((this.max - endValue) / step), 0);
+        this._tickMarks = Array(numInactiveBeforeStartThumb)
+            .fill(1 /* _MatTickMark.INACTIVE */)
+            .concat(Array(numActive).fill(0 /* _MatTickMark.ACTIVE */), Array(numInactiveAfterEndThumb).fill(1 /* _MatTickMark.INACTIVE */));
+    }
+    /** Gets the slider thumb input of the given thumb position. */
+    _getInput(thumbPosition) {
+        if (thumbPosition === 2 /* _MatThumb.END */ && this._input) {
+            return this._input;
+        }
+        if (this._inputs?.length) {
+            return thumbPosition === 1 /* _MatThumb.START */ ? this._inputs.first : this._inputs.last;
+        }
+        return;
+    }
+    /** Gets the slider thumb HTML input element of the given thumb position. */
+    _getThumb(thumbPosition) {
+        return thumbPosition === 2 /* _MatThumb.END */ ? this._thumbs?.last : this._thumbs?.first;
+    }
+    _setTransition(withAnimation) {
+        this._hasAnimation = withAnimation && !this._noopAnimations;
+        this._elementRef.nativeElement.classList.toggle('mat-mdc-slider-with-animation', this._hasAnimation);
     }
 }
-MatSlider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.0", ngImport: i0, type: MatSlider, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i3.Platform }, { token: GlobalChangeAndInputListener }, { token: DOCUMENT }, { token: i5.Directionality, optional: true }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MatSlider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-rc.0", type: MatSlider, selector: "mat-slider", inputs: { color: "color", disableRipple: "disableRipple", disabled: "disabled", discrete: "discrete", showTickMarks: "showTickMarks", min: "min", max: "max", step: "step", displayWith: "displayWith" }, host: { properties: { "class.mdc-slider--range": "_isRange()", "class.mdc-slider--disabled": "disabled", "class.mdc-slider--discrete": "discrete", "class.mdc-slider--tick-marks": "showTickMarks", "class._mat-animation-noopable": "_noopAnimations" }, classAttribute: "mat-mdc-slider mdc-slider" }, queries: [{ propertyName: "_inputs", predicate: MatSliderThumb }], viewQueries: [{ propertyName: "_trackActive", first: true, predicate: ["trackActive"], descendants: true }, { propertyName: "_thumbs", predicate: MatSliderVisualThumb, descendants: true }], exportAs: ["matSlider"], usesInheritance: true, ngImport: i0, template: "<!-- Inputs -->\n<ng-content></ng-content>\n\n<!-- Track -->\n<div class=\"mdc-slider__track\">\n  <div class=\"mdc-slider__track--inactive\"></div>\n  <div class=\"mdc-slider__track--active\">\n    <div class=\"mdc-slider__track--active_fill\" #trackActive></div>\n  </div>\n  <div *ngIf=\"showTickMarks\" class=\"mdc-slider__tick-marks\" #tickMarkContainer>\n    <div *ngFor=\"let tickMark of _tickMarks\" [class]=\"_getTickMarkClass(tickMark)\"></div>\n  </div>\n</div>\n\n<!-- Thumbs -->\n<mat-slider-visual-thumb\n  *ngFor=\"let thumb of _inputs\"\n  [discrete]=\"discrete\"\n  [disableRipple]=\"_isRippleDisabled()\"\n  [thumbPosition]=\"thumb._thumbPosition\"\n  [valueIndicatorText]=\"_getValueIndicatorText(thumb._thumbPosition)\">\n</mat-slider-visual-thumb>\n", styles: [".mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}[dir=rtl] .mdc-slider .mdc-slider__track--active_fill,.mdc-slider .mdc-slider__track--active_fill[dir=rtl]{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:var(--slider-value-indicator-container-left, 50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);transform:var(--slider-value-indicator-container-transform, translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid;bottom:-5px;content:\"\";height:0;left:var(--slider-value-indicator-caret-left, 50%);position:absolute;right:var(--slider-value-indicator-caret-right);transform:var(--slider-value-indicator-caret-transform, translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(1)}@media(prefers-reduced-motion){.mdc-slider .mdc-slider__value-indicator,.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__thumb{display:flex;left:-24px;outline:none;position:absolute;user-select:none;height:48px;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{box-sizing:border-box;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media(prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider--disabled{cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.mat-mdc-slider{display:inline-block;box-sizing:border-box;outline:none;vertical-align:middle;margin-left:8px;margin-right:8px;width:auto;min-width:112px}.mat-mdc-slider .mdc-slider__thumb-knob{background-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:var(--mdc-slider-disabled-handle-color, var(--mdc-theme-on-surface, #000));border-color:var(--mdc-slider-disabled-handle-color, var(--mdc-theme-on-surface, #000))}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb::before,.mat-mdc-slider .mdc-slider__thumb::after{background-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb:hover::before,.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before{opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mat-mdc-slider .mdc-slider__track--active_fill{border-color:var(--mdc-slider-active-track-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:var(--mdc-slider-disabled-active-track-color, var(--mdc-theme-on-surface, #000))}.mat-mdc-slider .mdc-slider__track--inactive{background-color:var(--mdc-slider-inactive-track-color, var(--mdc-theme-primary, #6200ee));opacity:.24}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:var(--mdc-slider-disabled-inactive-track-color, var(--mdc-theme-on-surface, #000));opacity:.24}.mat-mdc-slider .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #fff));opacity:var(--mdc-slider-with-tick-marks-active-container-opacity, 0.6)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #fff));opacity:var(--mdc-slider-with-tick-marks-active-container-opacity, 0.6)}.mat-mdc-slider .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-inactive-container-color, var(--mdc-theme-primary, #6200ee));opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity, 0.6)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-disabled-container-color, var(--mdc-theme-on-surface, #000));opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity, 0.6)}.mat-mdc-slider .mdc-slider__value-indicator{background-color:var(--mdc-slider-label-container-color, #666666);opacity:1}.mat-mdc-slider .mdc-slider__value-indicator::before{border-top-color:var(--mdc-slider-label-container-color, #666666)}.mat-mdc-slider .mdc-slider__value-indicator{color:var(--mdc-slider-label-label-text-color, var(--mdc-theme-on-primary, #fff))}.mat-mdc-slider .mdc-slider__track{height:var(--mdc-slider-inactive-track-height, 4px)}.mat-mdc-slider .mdc-slider__track--active{height:var(--mdc-slider-active-track-height, 6px)}.mat-mdc-slider .mdc-slider__track--inactive{height:var(--mdc-slider-inactive-track-height, 4px)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{height:var(--mdc-slider-with-tick-marks-container-size, 2px);width:var(--mdc-slider-with-tick-marks-container-size, 2px)}.mat-mdc-slider.mdc-slider--disabled{opacity:0.38}.mat-mdc-slider .mdc-slider__value-indicator-text{letter-spacing:var(--mdc-slider-label-label-text-tracking, 0.0071428571em);font-size:var(--mdc-slider-label-label-text-font-size, 0.875rem);font-family:var(--mdc-slider-label-label-text-font, Roboto, sans-serif);font-weight:var(--mdc-slider-label-label-text-weight, 500);line-height:var(--mdc-slider-label-label-text-line-height, 1.375rem)}.mat-mdc-slider .mdc-slider__track--active{border-radius:var(--mdc-slider-active-track-shape, 9999px)}.mat-mdc-slider .mdc-slider__track--inactive{border-radius:var(--mdc-slider-inactive-track-shape, 9999px)}.mat-mdc-slider .mdc-slider__thumb-knob{border-radius:var(--mdc-slider-handle-shape, 50%);width:var(--mdc-slider-handle-width, 20px);height:var(--mdc-slider-handle-height, 20px);border-style:solid;border-width:calc(var(--mdc-slider-handle-height, 20px) / 2) calc(var(--mdc-slider-handle-width, 20px) / 2)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{border-radius:var(--mdc-slider-with-tick-marks-container-shape, 50%)}.mat-mdc-slider .mdc-slider__thumb-knob{--mdc-elevation-box-shadow-for-gss:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-slider-handle-elevation, var(--mdc-elevation-box-shadow-for-gss))}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb-knob{background-color:var(--mdc-slider-hover-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-hover-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob{background-color:var(--mdc-slider-focus-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-focus-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:var(--mdc-slider-with-overlap-handle-outline-color, #fff);border-width:var(--mdc-slider-with-overlap-handle-outline-width, 1px)}.mat-mdc-slider .mdc-slider__value-indicator{opacity:var(--mat-mdc-slider-value-indicator-opacity, 1)}.mat-mdc-slider .mat-ripple .mat-ripple-element{background-color:var(--mat-mdc-slider-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-hover-ripple{background-color:var(--mat-mdc-slider-hover-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-focus-ripple,.mat-mdc-slider .mat-ripple .mat-mdc-slider-active-ripple{background-color:var(--mat-mdc-slider-focus-ripple-color, transparent)}.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__track--active_fill,.mat-mdc-slider._mat-animation-noopable .mdc-slider__value-indicator{transition:none}.mat-mdc-slider .mat-mdc-focus-indicator::before{border-radius:50%}.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before{content:\"\"}"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatSliderVisualThumb, selector: "mat-slider-visual-thumb", inputs: ["discrete", "thumbPosition", "valueIndicatorText", "disableRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.0", ngImport: i0, type: MatSlider, decorators: [{
+MatSlider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSlider, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.Platform }, { token: i0.ElementRef }, { token: i2$1.Directionality, optional: true }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MatSlider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-rc.1", type: MatSlider, selector: "mat-slider", inputs: { color: "color", disableRipple: "disableRipple", disabled: "disabled", discrete: "discrete", showTickMarks: "showTickMarks", min: "min", max: "max", step: "step", displayWith: "displayWith" }, host: { properties: { "class.mdc-slider--range": "_isRange", "class.mdc-slider--disabled": "disabled", "class.mdc-slider--discrete": "discrete", "class.mdc-slider--tick-marks": "showTickMarks", "class._mat-animation-noopable": "_noopAnimations" }, classAttribute: "mat-mdc-slider mdc-slider" }, providers: [{ provide: MAT_SLIDER, useExisting: MatSlider }], queries: [{ propertyName: "_input", first: true, predicate: MAT_SLIDER_THUMB, descendants: true }, { propertyName: "_inputs", predicate: MAT_SLIDER_RANGE_THUMB }], viewQueries: [{ propertyName: "_trackActive", first: true, predicate: ["trackActive"], descendants: true }, { propertyName: "_thumbs", predicate: MAT_SLIDER_VISUAL_THUMB, descendants: true }], exportAs: ["matSlider"], usesInheritance: true, ngImport: i0, template: "<!-- Inputs -->\n<ng-content></ng-content>\n\n<!-- Track -->\n<div class=\"mdc-slider__track\">\n  <div class=\"mdc-slider__track--inactive\"></div>\n  <div class=\"mdc-slider__track--active\">\n    <div #trackActive class=\"mdc-slider__track--active_fill\"></div>\n  </div>\n  <div *ngIf=\"showTickMarks\" class=\"mdc-slider__tick-marks\" #tickMarkContainer>\n    <ng-container *ngIf=\"_cachedWidth\">\n        <div\n          *ngFor=\"let tickMark of _tickMarks; let i = index\"\n          [class]=\"tickMark === 0 ? 'mdc-slider__tick-mark--active' : 'mdc-slider__tick-mark--inactive'\"\n          [style.transform]=\"_calcTickMarkTransform(i)\"></div>\n    </ng-container>\n  </div>\n</div>\n\n<!-- Thumbs -->\n<mat-slider-visual-thumb\n  *ngIf=\"_isRange\"\n  [discrete]=\"discrete\"\n  [thumbPosition]=\"1\"\n  [valueIndicatorText]=\"startValueIndicatorText\">\n</mat-slider-visual-thumb>\n\n<mat-slider-visual-thumb\n  [discrete]=\"discrete\"\n  [thumbPosition]=\"2\"\n  [valueIndicatorText]=\"endValueIndicatorText\">\n</mat-slider-visual-thumb>\n", styles: [".mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}[dir=rtl] .mdc-slider .mdc-slider__track--active_fill,.mdc-slider .mdc-slider__track--active_fill[dir=rtl]{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:var(--slider-value-indicator-container-left, 50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);transform:var(--slider-value-indicator-container-transform, translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid;bottom:-5px;content:\"\";height:0;left:var(--slider-value-indicator-caret-left, 50%);position:absolute;right:var(--slider-value-indicator-caret-right);transform:var(--slider-value-indicator-caret-transform, translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(1)}@media(prefers-reduced-motion){.mdc-slider .mdc-slider__value-indicator,.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__thumb{display:flex;left:-24px;outline:none;position:absolute;user-select:none;height:48px;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{box-sizing:border-box;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media(prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider--disabled{cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.mat-mdc-slider{display:inline-block;box-sizing:border-box;outline:none;vertical-align:middle;margin-left:8px;margin-right:8px;width:auto;min-width:112px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-slider .mdc-slider__thumb-knob{background-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:var(--mdc-slider-disabled-handle-color, var(--mdc-theme-on-surface, #000));border-color:var(--mdc-slider-disabled-handle-color, var(--mdc-theme-on-surface, #000))}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb::before,.mat-mdc-slider .mdc-slider__thumb::after{background-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb:hover::before,.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before{opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mat-mdc-slider .mdc-slider__track--active_fill{border-color:var(--mdc-slider-active-track-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:var(--mdc-slider-disabled-active-track-color, var(--mdc-theme-on-surface, #000))}.mat-mdc-slider .mdc-slider__track--inactive{background-color:var(--mdc-slider-inactive-track-color, var(--mdc-theme-primary, #6200ee));opacity:.24}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:var(--mdc-slider-disabled-inactive-track-color, var(--mdc-theme-on-surface, #000));opacity:.24}.mat-mdc-slider .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #fff));opacity:var(--mdc-slider-with-tick-marks-active-container-opacity, 0.6)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #fff));opacity:var(--mdc-slider-with-tick-marks-active-container-opacity, 0.6)}.mat-mdc-slider .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-inactive-container-color, var(--mdc-theme-primary, #6200ee));opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity, 0.6)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-disabled-container-color, var(--mdc-theme-on-surface, #000));opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity, 0.6)}.mat-mdc-slider .mdc-slider__value-indicator{background-color:var(--mdc-slider-label-container-color, #666666);opacity:1}.mat-mdc-slider .mdc-slider__value-indicator::before{border-top-color:var(--mdc-slider-label-container-color, #666666)}.mat-mdc-slider .mdc-slider__value-indicator{color:var(--mdc-slider-label-label-text-color, var(--mdc-theme-on-primary, #fff))}.mat-mdc-slider .mdc-slider__track{height:var(--mdc-slider-inactive-track-height, 4px)}.mat-mdc-slider .mdc-slider__track--active{height:var(--mdc-slider-active-track-height, 6px)}.mat-mdc-slider .mdc-slider__track--inactive{height:var(--mdc-slider-inactive-track-height, 4px)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{height:var(--mdc-slider-with-tick-marks-container-size, 2px);width:var(--mdc-slider-with-tick-marks-container-size, 2px)}.mat-mdc-slider.mdc-slider--disabled{opacity:0.38}.mat-mdc-slider .mdc-slider__value-indicator-text{letter-spacing:var(--mdc-slider-label-label-text-tracking, 0.0071428571em);font-size:var(--mdc-slider-label-label-text-font-size, 0.875rem);font-family:var(--mdc-slider-label-label-text-font, Roboto, sans-serif);font-weight:var(--mdc-slider-label-label-text-weight, 500);line-height:var(--mdc-slider-label-label-text-line-height, 1.375rem)}.mat-mdc-slider .mdc-slider__track--active{border-radius:var(--mdc-slider-active-track-shape, 9999px)}.mat-mdc-slider .mdc-slider__track--inactive{border-radius:var(--mdc-slider-inactive-track-shape, 9999px)}.mat-mdc-slider .mdc-slider__thumb-knob{border-radius:var(--mdc-slider-handle-shape, 50%);width:var(--mdc-slider-handle-width, 20px);height:var(--mdc-slider-handle-height, 20px);border-style:solid;border-width:calc(var(--mdc-slider-handle-height, 20px) / 2) calc(var(--mdc-slider-handle-width, 20px) / 2)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{border-radius:var(--mdc-slider-with-tick-marks-container-shape, 50%)}.mat-mdc-slider .mdc-slider__thumb-knob{box-shadow:var(--mdc-slider-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12))}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb-knob{background-color:var(--mdc-slider-hover-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-hover-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob{background-color:var(--mdc-slider-focus-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-focus-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:var(--mdc-slider-with-overlap-handle-outline-color, #fff);border-width:var(--mdc-slider-with-overlap-handle-outline-width, 1px)}.mat-mdc-slider .mdc-slider__input{pointer-events:auto}.mat-mdc-slider .mdc-slider__input.mat-mdc-slider-input-no-pointer-events{pointer-events:none}.mat-mdc-slider .mdc-slider__input.mat-slider__right-input{left:auto;right:0}.mat-mdc-slider .mdc-slider__thumb,.mat-mdc-slider .mdc-slider__track--active_fill{transition-duration:0ms}.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb,.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill{transition-duration:80ms}.mat-mdc-slider.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider.mdc-slider--discrete .mdc-slider__track--active_fill{transition-duration:0ms}.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb,.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill{transition-duration:80ms}.mat-mdc-slider .mdc-slider__track,.mat-mdc-slider .mdc-slider__thumb{pointer-events:none}.mat-mdc-slider .mdc-slider__value-indicator{opacity:var(--mat-mdc-slider-value-indicator-opacity, 1)}.mat-mdc-slider .mat-ripple .mat-ripple-element{background-color:var(--mat-mdc-slider-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-hover-ripple{background-color:var(--mat-mdc-slider-hover-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-focus-ripple,.mat-mdc-slider .mat-ripple .mat-mdc-slider-active-ripple{background-color:var(--mat-mdc-slider-focus-ripple-color, transparent)}.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__track--active_fill,.mat-mdc-slider._mat-animation-noopable .mdc-slider__value-indicator{transition:none}.mat-mdc-slider .mat-mdc-focus-indicator::before{border-radius:50%}.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before{content:\"\"}"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatSliderVisualThumb, selector: "mat-slider-visual-thumb", inputs: ["discrete", "thumbPosition", "valueIndicatorText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSlider, decorators: [{
             type: Component,
             args: [{ selector: 'mat-slider', host: {
                         'class': 'mat-mdc-slider mdc-slider',
-                        '[class.mdc-slider--range]': '_isRange()',
+                        '[class.mdc-slider--range]': '_isRange',
                         '[class.mdc-slider--disabled]': 'disabled',
                         '[class.mdc-slider--discrete]': 'discrete',
                         '[class.mdc-slider--tick-marks]': 'showTickMarks',
                         '[class._mat-animation-noopable]': '_noopAnimations',
-                    }, exportAs: 'matSlider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['color', 'disableRipple'], template: "<!-- Inputs -->\n<ng-content></ng-content>\n\n<!-- Track -->\n<div class=\"mdc-slider__track\">\n  <div class=\"mdc-slider__track--inactive\"></div>\n  <div class=\"mdc-slider__track--active\">\n    <div class=\"mdc-slider__track--active_fill\" #trackActive></div>\n  </div>\n  <div *ngIf=\"showTickMarks\" class=\"mdc-slider__tick-marks\" #tickMarkContainer>\n    <div *ngFor=\"let tickMark of _tickMarks\" [class]=\"_getTickMarkClass(tickMark)\"></div>\n  </div>\n</div>\n\n<!-- Thumbs -->\n<mat-slider-visual-thumb\n  *ngFor=\"let thumb of _inputs\"\n  [discrete]=\"discrete\"\n  [disableRipple]=\"_isRippleDisabled()\"\n  [thumbPosition]=\"thumb._thumbPosition\"\n  [valueIndicatorText]=\"_getValueIndicatorText(thumb._thumbPosition)\">\n</mat-slider-visual-thumb>\n", styles: [".mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}[dir=rtl] .mdc-slider .mdc-slider__track--active_fill,.mdc-slider .mdc-slider__track--active_fill[dir=rtl]{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:var(--slider-value-indicator-container-left, 50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);transform:var(--slider-value-indicator-container-transform, translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid;bottom:-5px;content:\"\";height:0;left:var(--slider-value-indicator-caret-left, 50%);position:absolute;right:var(--slider-value-indicator-caret-right);transform:var(--slider-value-indicator-caret-transform, translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(1)}@media(prefers-reduced-motion){.mdc-slider .mdc-slider__value-indicator,.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__thumb{display:flex;left:-24px;outline:none;position:absolute;user-select:none;height:48px;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{box-sizing:border-box;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media(prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider--disabled{cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.mat-mdc-slider{display:inline-block;box-sizing:border-box;outline:none;vertical-align:middle;margin-left:8px;margin-right:8px;width:auto;min-width:112px}.mat-mdc-slider .mdc-slider__thumb-knob{background-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:var(--mdc-slider-disabled-handle-color, var(--mdc-theme-on-surface, #000));border-color:var(--mdc-slider-disabled-handle-color, var(--mdc-theme-on-surface, #000))}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb::before,.mat-mdc-slider .mdc-slider__thumb::after{background-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb:hover::before,.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before{opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mat-mdc-slider .mdc-slider__track--active_fill{border-color:var(--mdc-slider-active-track-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:var(--mdc-slider-disabled-active-track-color, var(--mdc-theme-on-surface, #000))}.mat-mdc-slider .mdc-slider__track--inactive{background-color:var(--mdc-slider-inactive-track-color, var(--mdc-theme-primary, #6200ee));opacity:.24}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:var(--mdc-slider-disabled-inactive-track-color, var(--mdc-theme-on-surface, #000));opacity:.24}.mat-mdc-slider .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #fff));opacity:var(--mdc-slider-with-tick-marks-active-container-opacity, 0.6)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #fff));opacity:var(--mdc-slider-with-tick-marks-active-container-opacity, 0.6)}.mat-mdc-slider .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-inactive-container-color, var(--mdc-theme-primary, #6200ee));opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity, 0.6)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-disabled-container-color, var(--mdc-theme-on-surface, #000));opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity, 0.6)}.mat-mdc-slider .mdc-slider__value-indicator{background-color:var(--mdc-slider-label-container-color, #666666);opacity:1}.mat-mdc-slider .mdc-slider__value-indicator::before{border-top-color:var(--mdc-slider-label-container-color, #666666)}.mat-mdc-slider .mdc-slider__value-indicator{color:var(--mdc-slider-label-label-text-color, var(--mdc-theme-on-primary, #fff))}.mat-mdc-slider .mdc-slider__track{height:var(--mdc-slider-inactive-track-height, 4px)}.mat-mdc-slider .mdc-slider__track--active{height:var(--mdc-slider-active-track-height, 6px)}.mat-mdc-slider .mdc-slider__track--inactive{height:var(--mdc-slider-inactive-track-height, 4px)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{height:var(--mdc-slider-with-tick-marks-container-size, 2px);width:var(--mdc-slider-with-tick-marks-container-size, 2px)}.mat-mdc-slider.mdc-slider--disabled{opacity:0.38}.mat-mdc-slider .mdc-slider__value-indicator-text{letter-spacing:var(--mdc-slider-label-label-text-tracking, 0.0071428571em);font-size:var(--mdc-slider-label-label-text-font-size, 0.875rem);font-family:var(--mdc-slider-label-label-text-font, Roboto, sans-serif);font-weight:var(--mdc-slider-label-label-text-weight, 500);line-height:var(--mdc-slider-label-label-text-line-height, 1.375rem)}.mat-mdc-slider .mdc-slider__track--active{border-radius:var(--mdc-slider-active-track-shape, 9999px)}.mat-mdc-slider .mdc-slider__track--inactive{border-radius:var(--mdc-slider-inactive-track-shape, 9999px)}.mat-mdc-slider .mdc-slider__thumb-knob{border-radius:var(--mdc-slider-handle-shape, 50%);width:var(--mdc-slider-handle-width, 20px);height:var(--mdc-slider-handle-height, 20px);border-style:solid;border-width:calc(var(--mdc-slider-handle-height, 20px) / 2) calc(var(--mdc-slider-handle-width, 20px) / 2)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{border-radius:var(--mdc-slider-with-tick-marks-container-shape, 50%)}.mat-mdc-slider .mdc-slider__thumb-knob{--mdc-elevation-box-shadow-for-gss:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-slider-handle-elevation, var(--mdc-elevation-box-shadow-for-gss))}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb-knob{background-color:var(--mdc-slider-hover-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-hover-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob{background-color:var(--mdc-slider-focus-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-focus-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:var(--mdc-slider-with-overlap-handle-outline-color, #fff);border-width:var(--mdc-slider-with-overlap-handle-outline-width, 1px)}.mat-mdc-slider .mdc-slider__value-indicator{opacity:var(--mat-mdc-slider-value-indicator-opacity, 1)}.mat-mdc-slider .mat-ripple .mat-ripple-element{background-color:var(--mat-mdc-slider-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-hover-ripple{background-color:var(--mat-mdc-slider-hover-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-focus-ripple,.mat-mdc-slider .mat-ripple .mat-mdc-slider-active-ripple{background-color:var(--mat-mdc-slider-focus-ripple-color, transparent)}.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__track--active_fill,.mat-mdc-slider._mat-animation-noopable .mdc-slider__value-indicator{transition:none}.mat-mdc-slider .mat-mdc-focus-indicator::before{border-radius:50%}.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before{content:\"\"}"] }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i3.Platform }, { type: GlobalChangeAndInputListener }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i5.Directionality, decorators: [{
+                    }, exportAs: 'matSlider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['color', 'disableRipple'], providers: [{ provide: MAT_SLIDER, useExisting: MatSlider }], template: "<!-- Inputs -->\n<ng-content></ng-content>\n\n<!-- Track -->\n<div class=\"mdc-slider__track\">\n  <div class=\"mdc-slider__track--inactive\"></div>\n  <div class=\"mdc-slider__track--active\">\n    <div #trackActive class=\"mdc-slider__track--active_fill\"></div>\n  </div>\n  <div *ngIf=\"showTickMarks\" class=\"mdc-slider__tick-marks\" #tickMarkContainer>\n    <ng-container *ngIf=\"_cachedWidth\">\n        <div\n          *ngFor=\"let tickMark of _tickMarks; let i = index\"\n          [class]=\"tickMark === 0 ? 'mdc-slider__tick-mark--active' : 'mdc-slider__tick-mark--inactive'\"\n          [style.transform]=\"_calcTickMarkTransform(i)\"></div>\n    </ng-container>\n  </div>\n</div>\n\n<!-- Thumbs -->\n<mat-slider-visual-thumb\n  *ngIf=\"_isRange\"\n  [discrete]=\"discrete\"\n  [thumbPosition]=\"1\"\n  [valueIndicatorText]=\"startValueIndicatorText\">\n</mat-slider-visual-thumb>\n\n<mat-slider-visual-thumb\n  [discrete]=\"discrete\"\n  [thumbPosition]=\"2\"\n  [valueIndicatorText]=\"endValueIndicatorText\">\n</mat-slider-visual-thumb>\n", styles: [".mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}[dir=rtl] .mdc-slider .mdc-slider__track--active_fill,.mdc-slider .mdc-slider__track--active_fill[dir=rtl]{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:var(--slider-value-indicator-container-left, 50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);transform:var(--slider-value-indicator-container-transform, translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid;bottom:-5px;content:\"\";height:0;left:var(--slider-value-indicator-caret-left, 50%);position:absolute;right:var(--slider-value-indicator-caret-right);transform:var(--slider-value-indicator-caret-transform, translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(1)}@media(prefers-reduced-motion){.mdc-slider .mdc-slider__value-indicator,.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__thumb{display:flex;left:-24px;outline:none;position:absolute;user-select:none;height:48px;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{box-sizing:border-box;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media(prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider--disabled{cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.mat-mdc-slider{display:inline-block;box-sizing:border-box;outline:none;vertical-align:middle;margin-left:8px;margin-right:8px;width:auto;min-width:112px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-slider .mdc-slider__thumb-knob{background-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:var(--mdc-slider-disabled-handle-color, var(--mdc-theme-on-surface, #000));border-color:var(--mdc-slider-disabled-handle-color, var(--mdc-theme-on-surface, #000))}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb::before,.mat-mdc-slider .mdc-slider__thumb::after{background-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb:hover::before,.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before{opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mat-mdc-slider .mdc-slider__track--active_fill{border-color:var(--mdc-slider-active-track-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:var(--mdc-slider-disabled-active-track-color, var(--mdc-theme-on-surface, #000))}.mat-mdc-slider .mdc-slider__track--inactive{background-color:var(--mdc-slider-inactive-track-color, var(--mdc-theme-primary, #6200ee));opacity:.24}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:var(--mdc-slider-disabled-inactive-track-color, var(--mdc-theme-on-surface, #000));opacity:.24}.mat-mdc-slider .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #fff));opacity:var(--mdc-slider-with-tick-marks-active-container-opacity, 0.6)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #fff));opacity:var(--mdc-slider-with-tick-marks-active-container-opacity, 0.6)}.mat-mdc-slider .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-inactive-container-color, var(--mdc-theme-primary, #6200ee));opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity, 0.6)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-disabled-container-color, var(--mdc-theme-on-surface, #000));opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity, 0.6)}.mat-mdc-slider .mdc-slider__value-indicator{background-color:var(--mdc-slider-label-container-color, #666666);opacity:1}.mat-mdc-slider .mdc-slider__value-indicator::before{border-top-color:var(--mdc-slider-label-container-color, #666666)}.mat-mdc-slider .mdc-slider__value-indicator{color:var(--mdc-slider-label-label-text-color, var(--mdc-theme-on-primary, #fff))}.mat-mdc-slider .mdc-slider__track{height:var(--mdc-slider-inactive-track-height, 4px)}.mat-mdc-slider .mdc-slider__track--active{height:var(--mdc-slider-active-track-height, 6px)}.mat-mdc-slider .mdc-slider__track--inactive{height:var(--mdc-slider-inactive-track-height, 4px)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{height:var(--mdc-slider-with-tick-marks-container-size, 2px);width:var(--mdc-slider-with-tick-marks-container-size, 2px)}.mat-mdc-slider.mdc-slider--disabled{opacity:0.38}.mat-mdc-slider .mdc-slider__value-indicator-text{letter-spacing:var(--mdc-slider-label-label-text-tracking, 0.0071428571em);font-size:var(--mdc-slider-label-label-text-font-size, 0.875rem);font-family:var(--mdc-slider-label-label-text-font, Roboto, sans-serif);font-weight:var(--mdc-slider-label-label-text-weight, 500);line-height:var(--mdc-slider-label-label-text-line-height, 1.375rem)}.mat-mdc-slider .mdc-slider__track--active{border-radius:var(--mdc-slider-active-track-shape, 9999px)}.mat-mdc-slider .mdc-slider__track--inactive{border-radius:var(--mdc-slider-inactive-track-shape, 9999px)}.mat-mdc-slider .mdc-slider__thumb-knob{border-radius:var(--mdc-slider-handle-shape, 50%);width:var(--mdc-slider-handle-width, 20px);height:var(--mdc-slider-handle-height, 20px);border-style:solid;border-width:calc(var(--mdc-slider-handle-height, 20px) / 2) calc(var(--mdc-slider-handle-width, 20px) / 2)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{border-radius:var(--mdc-slider-with-tick-marks-container-shape, 50%)}.mat-mdc-slider .mdc-slider__thumb-knob{box-shadow:var(--mdc-slider-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12))}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb-knob{background-color:var(--mdc-slider-hover-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-hover-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob{background-color:var(--mdc-slider-focus-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-focus-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:var(--mdc-slider-with-overlap-handle-outline-color, #fff);border-width:var(--mdc-slider-with-overlap-handle-outline-width, 1px)}.mat-mdc-slider .mdc-slider__input{pointer-events:auto}.mat-mdc-slider .mdc-slider__input.mat-mdc-slider-input-no-pointer-events{pointer-events:none}.mat-mdc-slider .mdc-slider__input.mat-slider__right-input{left:auto;right:0}.mat-mdc-slider .mdc-slider__thumb,.mat-mdc-slider .mdc-slider__track--active_fill{transition-duration:0ms}.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb,.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill{transition-duration:80ms}.mat-mdc-slider.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider.mdc-slider--discrete .mdc-slider__track--active_fill{transition-duration:0ms}.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb,.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill{transition-duration:80ms}.mat-mdc-slider .mdc-slider__track,.mat-mdc-slider .mdc-slider__thumb{pointer-events:none}.mat-mdc-slider .mdc-slider__value-indicator{opacity:var(--mat-mdc-slider-value-indicator-opacity, 1)}.mat-mdc-slider .mat-ripple .mat-ripple-element{background-color:var(--mat-mdc-slider-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-hover-ripple{background-color:var(--mat-mdc-slider-hover-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-focus-ripple,.mat-mdc-slider .mat-ripple .mat-mdc-slider-active-ripple{background-color:var(--mat-mdc-slider-focus-ripple-color, transparent)}.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__track--active_fill,.mat-mdc-slider._mat-animation-noopable .mdc-slider__value-indicator{transition:none}.mat-mdc-slider .mat-mdc-focus-indicator::before{border-radius:50%}.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before{content:\"\"}"] }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.Platform }, { type: i0.ElementRef }, { type: i2$1.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -843,15 +895,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.0", ng
                 }, {
                     type: Inject,
                     args: [ANIMATION_MODULE_TYPE]
-                }] }]; }, propDecorators: { _thumbs: [{
-                type: ViewChildren,
-                args: [MatSliderVisualThumb]
-            }], _trackActive: [{
+                }] }]; }, propDecorators: { _trackActive: [{
                 type: ViewChild,
                 args: ['trackActive']
+            }], _thumbs: [{
+                type: ViewChildren,
+                args: [MAT_SLIDER_VISUAL_THUMB]
+            }], _input: [{
+                type: ContentChild,
+                args: [MAT_SLIDER_THUMB]
             }], _inputs: [{
                 type: ContentChildren,
-                args: [MatSliderThumb, { descendants: false }]
+                args: [MAT_SLIDER_RANGE_THUMB, { descendants: false }]
             }], disabled: [{
                 type: Input
             }], discrete: [{
@@ -867,284 +922,636 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.0", ng
             }], displayWith: [{
                 type: Input
             }] } });
-/** The MDCSliderAdapter implementation. */
-class SliderAdapter {
-    constructor(_delegate) {
-        this._delegate = _delegate;
-        /** The global event listener subscription used to handle events on the slider inputs. */
-        this._globalEventSubscriptions = new Subscription();
-        // We manually assign functions instead of using prototype methods because
-        // MDC clobbers the values otherwise.
-        // See https://github.com/material-components/material-components-web/pull/6256
-        this.hasClass = (className) => {
-            return this._delegate._elementRef.nativeElement.classList.contains(className);
-        };
-        this.addClass = (className) => {
-            this._delegate._elementRef.nativeElement.classList.add(className);
-        };
-        this.removeClass = (className) => {
-            this._delegate._elementRef.nativeElement.classList.remove(className);
-        };
-        this.getAttribute = (attribute) => {
-            return this._delegate._elementRef.nativeElement.getAttribute(attribute);
-        };
-        this.addThumbClass = (className, thumbPosition) => {
-            this._delegate._getThumbElement(thumbPosition).classList.add(className);
-        };
-        this.removeThumbClass = (className, thumbPosition) => {
-            this._delegate._getThumbElement(thumbPosition).classList.remove(className);
-        };
-        this.getInputValue = (thumbPosition) => {
-            return this._delegate._getInputElement(thumbPosition).value;
-        };
-        this.setInputValue = (value, thumbPosition) => {
-            this._delegate._getInputElement(thumbPosition).value = value;
-        };
-        this.getInputAttribute = (attribute, thumbPosition) => {
-            return this._delegate._getInputElement(thumbPosition).getAttribute(attribute);
-        };
-        this.setInputAttribute = (attribute, value, thumbPosition) => {
-            const input = this._delegate._getInputElement(thumbPosition);
-            // TODO(wagnermaciel): remove this check once this component is
-            // added to the internal allowlist for calling setAttribute.
-            // Explicitly check the attribute we are setting to prevent xss.
-            switch (attribute) {
-                case 'aria-valuetext':
-                    input.setAttribute('aria-valuetext', value);
-                    break;
-                case 'disabled':
-                    input.setAttribute('disabled', value);
-                    break;
-                case 'min':
-                    input.setAttribute('min', value);
-                    break;
-                case 'max':
-                    input.setAttribute('max', value);
-                    break;
-                case 'value':
-                    input.setAttribute('value', value);
-                    break;
-                case 'step':
-                    input.setAttribute('step', value);
-                    break;
-                default:
-                    throw Error(`Tried to set invalid attribute ${attribute} on the mdc-slider.`);
-            }
-        };
-        this.removeInputAttribute = (attribute, thumbPosition) => {
-            this._delegate._getInputElement(thumbPosition).removeAttribute(attribute);
-        };
-        this.focusInput = (thumbPosition) => {
-            this._delegate._getInputElement(thumbPosition).focus();
-        };
-        this.isInputFocused = (thumbPosition) => {
-            return this._delegate._getInput(thumbPosition)._isFocused();
-        };
-        this.getThumbKnobWidth = (thumbPosition) => {
-            return this._delegate._getKnobElement(thumbPosition).getBoundingClientRect().width;
-        };
-        this.getThumbBoundingClientRect = (thumbPosition) => {
-            return this._delegate._getThumbElement(thumbPosition).getBoundingClientRect();
-        };
-        this.getBoundingClientRect = () => {
-            return this._delegate._getHostDimensions();
-        };
-        this.getValueIndicatorContainerWidth = (thumbPosition) => {
-            return this._delegate._getValueIndicatorContainerElement(thumbPosition).getBoundingClientRect()
-                .width;
-        };
-        this.isRTL = () => {
-            return this._delegate._isRTL();
-        };
-        this.setThumbStyleProperty = (propertyName, value, thumbPosition) => {
-            this._delegate._getThumbElement(thumbPosition).style.setProperty(propertyName, value);
-        };
-        this.removeThumbStyleProperty = (propertyName, thumbPosition) => {
-            this._delegate._getThumbElement(thumbPosition).style.removeProperty(propertyName);
-        };
-        this.setTrackActiveStyleProperty = (propertyName, value) => {
-            this._delegate._trackActive.nativeElement.style.setProperty(propertyName, value);
-        };
-        this.removeTrackActiveStyleProperty = (propertyName) => {
-            this._delegate._trackActive.nativeElement.style.removeProperty(propertyName);
-        };
-        this.setValueIndicatorText = (value, thumbPosition) => {
-            this._delegate._setValueIndicatorText(value, thumbPosition);
-        };
-        this.getValueToAriaValueTextFn = () => {
-            return this._delegate.displayWith;
-        };
-        this.updateTickMarks = (tickMarks) => {
-            this._delegate._tickMarks = tickMarks;
-            this._delegate._cdr.markForCheck();
-        };
-        this.setPointerCapture = (pointerId) => {
-            this._delegate._elementRef.nativeElement.setPointerCapture(pointerId);
-        };
-        this.emitChangeEvent = (value, thumbPosition) => {
-            // We block all real slider input change events and emit fake change events from here, instead.
-            // We do this because the mdc implementation of the slider does not trigger real change events
-            // on pointer up (only on left or right arrow key down).
-            //
-            // By stopping real change events from reaching users, and dispatching fake change events
-            // (which we allow to reach the user) the slider inputs change events are triggered at the
-            // appropriate times. This allows users to listen for change events directly on the slider
-            // input as they would with a native range input.
-            const input = this._delegate._getInput(thumbPosition);
-            input._emitFakeEvent('change');
-            input._onChange(value);
-            input.valueChange.emit(value);
-        };
-        this.emitInputEvent = (value, thumbPosition) => {
-            this._delegate._getInput(thumbPosition)._emitFakeEvent('input');
-        };
-        this.emitDragStartEvent = (value, thumbPosition) => {
-            const input = this._delegate._getInput(thumbPosition);
-            input.dragStart.emit({ source: input, parent: this._delegate, value });
-        };
-        this.emitDragEndEvent = (value, thumbPosition) => {
-            const input = this._delegate._getInput(thumbPosition);
-            input.dragEnd.emit({ source: input, parent: this._delegate, value });
-        };
-        this.registerEventHandler = (evtType, handler) => {
-            this._delegate._elementRef.nativeElement.addEventListener(evtType, handler);
-        };
-        this.deregisterEventHandler = (evtType, handler) => {
-            this._delegate._elementRef.nativeElement.removeEventListener(evtType, handler);
-        };
-        this.registerThumbEventHandler = (thumbPosition, evtType, handler) => {
-            this._delegate._getThumbElement(thumbPosition).addEventListener(evtType, handler);
-        };
-        this.deregisterThumbEventHandler = (thumbPosition, evtType, handler) => {
-            this._delegate._getThumbElement(thumbPosition)?.removeEventListener(evtType, handler);
-        };
-        this.registerInputEventHandler = (thumbPosition, evtType, handler) => {
-            if (evtType === 'change') {
-                this._saveChangeEventHandler(thumbPosition, handler);
-            }
-            else {
-                this._delegate._getInputElement(thumbPosition)?.addEventListener(evtType, handler);
-            }
-        };
-        this.deregisterInputEventHandler = (thumbPosition, evtType, handler) => {
-            if (evtType === 'change') {
-                this._globalEventSubscriptions.unsubscribe();
-            }
-            else {
-                this._delegate._getInputElement(thumbPosition)?.removeEventListener(evtType, handler);
-            }
-        };
-        this.registerBodyEventHandler = (evtType, handler) => {
-            this._delegate._document.body.addEventListener(evtType, handler);
-        };
-        this.deregisterBodyEventHandler = (evtType, handler) => {
-            this._delegate._document.body.removeEventListener(evtType, handler);
-        };
-        this.registerWindowEventHandler = (evtType, handler) => {
-            this._delegate._window.addEventListener(evtType, handler);
-        };
-        this.deregisterWindowEventHandler = (evtType, handler) => {
-            this._delegate._window.removeEventListener(evtType, handler);
-        };
-        this._globalEventSubscriptions.add(this._subscribeToSliderInputEvents('change'));
-        this._globalEventSubscriptions.add(this._subscribeToSliderInputEvents('input'));
+/** Ensures that there is not an invalid configuration for the slider thumb inputs. */
+function _validateInputs(isRange, endInputElement, startInputElement) {
+    const startValid = !isRange || startInputElement?._hostElement.hasAttribute('matSliderStartThumb');
+    const endValid = endInputElement._hostElement.hasAttribute(isRange ? 'matSliderEndThumb' : 'matSliderThumb');
+    if (!startValid || !endValid) {
+        _throwInvalidInputConfigurationError();
     }
-    /**
-     * Handles "change" and "input" events on the slider inputs.
-     *
-     * Exposes a callback to allow the MDC Foundations "change" event handler to be called for "real"
-     * events.
-     *
-     * ** IMPORTANT NOTE **
-     *
-     * We block all "real" change and input events and emit fake events from #emitChangeEvent and
-     * #emitInputEvent, instead. We do this because interacting with the MDC slider won't trigger all
-     * of the correct change and input events, but it will call #emitChangeEvent and #emitInputEvent
-     * at the correct times. This allows users to listen for these events directly on the slider
-     * input as they would with a native range input.
-     */
-    _subscribeToSliderInputEvents(type) {
-        return this._delegate._globalChangeAndInputListener.listen(type, (event) => {
-            const thumbPosition = this._getInputThumbPosition(event.target);
-            // Do nothing if the event isn't from a thumb input.
-            if (thumbPosition === null) {
-                return;
-            }
-            // Do nothing if the event is "fake".
-            if (event._matIsHandled) {
-                return;
-            }
-            // Prevent "real" events from reaching end users.
-            event.stopImmediatePropagation();
-            // Relay "real" change events to the MDC Foundation.
-            if (type === 'change') {
-                this._callChangeEventHandler(event, thumbPosition);
-            }
+}
+function _throwInvalidInputConfigurationError() {
+    throw Error(`Invalid slider thumb input configuration!
+
+   Valid configurations are as follows:
+
+     <mat-slider>
+       <input matSliderThumb>
+     </mat-slider>
+
+     or
+
+     <mat-slider>
+       <input matSliderStartThumb>
+       <input matSliderEndThumb>
+     </mat-slider>
+   `);
+}
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Provider that allows the slider thumb to register as a ControlValueAccessor.
+ * @docs-private
+ */
+const MAT_SLIDER_THUMB_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => MatSliderThumb),
+    multi: true,
+};
+/**
+ * Provider that allows the range slider thumb to register as a ControlValueAccessor.
+ * @docs-private
+ */
+const MAT_SLIDER_RANGE_THUMB_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => MatSliderRangeThumb),
+    multi: true,
+};
+/**
+ * Directive that adds slider-specific behaviors to an input element inside `<mat-slider>`.
+ * Up to two may be placed inside of a `<mat-slider>`.
+ *
+ * If one is used, the selector `matSliderThumb` must be used, and the outcome will be a normal
+ * slider. If two are used, the selectors `matSliderStartThumb` and `matSliderEndThumb` must be
+ * used, and the outcome will be a range slider with two slider thumbs.
+ */
+class MatSliderThumb {
+    constructor(_ngZone, _elementRef, _cdr, _slider) {
+        this._ngZone = _ngZone;
+        this._elementRef = _elementRef;
+        this._cdr = _cdr;
+        this._slider = _slider;
+        this.valueChange = new EventEmitter();
+        /** Event emitted when the slider thumb starts being dragged. */
+        this.dragStart = new EventEmitter();
+        /** Event emitted when the slider thumb stops being dragged. */
+        this.dragEnd = new EventEmitter();
+        /** Indicates whether this thumb is the start or end thumb. */
+        this.thumbPosition = 2 /* _MatThumb.END */;
+        /** The radius of a native html slider's knob. */
+        this._knobRadius = 8;
+        /** Whether user's cursor is currently in a mouse down state on the input. */
+        this._isActive = false;
+        /** Whether the input is currently focused (either by tab or after clicking). */
+        this._isFocused = false;
+        /**
+         * Whether the initial value has been set.
+         * This exists because the initial value cannot be immediately set because the min and max
+         * must first be relayed from the parent MatSlider component, which can only happen later
+         * in the component lifecycle.
+         */
+        this._hasSetInitialValue = false;
+        /** Emits when the component is destroyed. */
+        this._destroyed = new Subject();
+        /**
+         * Indicates whether UI updates should be skipped.
+         *
+         * This flag is used to avoid flickering
+         * when correcting values on pointer up/down.
+         */
+        this._skipUIUpdate = false;
+        /** Callback called when the slider input value changes. */
+        this._onChangeFn = () => { };
+        /** Callback called when the slider input has been touched. */
+        this._onTouchedFn = () => { };
+        this._hostElement = _elementRef.nativeElement;
+        this._ngZone.runOutsideAngular(() => {
+            this._hostElement.addEventListener('pointerdown', this._onPointerDown.bind(this));
+            this._hostElement.addEventListener('pointermove', this._onPointerMove.bind(this));
+            this._hostElement.addEventListener('pointerup', this._onPointerUp.bind(this));
         });
     }
-    /** Calls the MDC Foundations change event handler for the specified thumb position. */
-    _callChangeEventHandler(event, thumbPosition) {
-        if (thumbPosition === Thumb.START) {
-            this._startInputChangeEventHandler(event);
+    get value() {
+        return coerceNumberProperty(this._hostElement.value);
+    }
+    set value(v) {
+        const val = coerceNumberProperty(v).toString();
+        if (!this._hasSetInitialValue) {
+            this._initialValue = val;
+            return;
         }
-        else {
-            this._endInputChangeEventHandler(event);
+        if (this._isActive) {
+            return;
+        }
+        this._hostElement.value = val;
+        this._updateThumbUIByValue();
+        this._slider._onValueChange(this);
+        this._cdr.detectChanges();
+    }
+    /** The current translateX in px of the slider visual thumb. */
+    get translateX() {
+        if (this._slider.min >= this._slider.max) {
+            this._translateX = 0;
+            return this._translateX;
+        }
+        if (this._translateX === undefined) {
+            this._translateX = this._calcTranslateXByValue();
+        }
+        return this._translateX;
+    }
+    set translateX(v) {
+        this._translateX = v;
+    }
+    get min() {
+        return coerceNumberProperty(this._hostElement.min);
+    }
+    set min(v) {
+        this._hostElement.min = coerceNumberProperty(v).toString();
+        this._cdr.detectChanges();
+    }
+    get max() {
+        return coerceNumberProperty(this._hostElement.max);
+    }
+    set max(v) {
+        this._hostElement.max = coerceNumberProperty(v).toString();
+        this._cdr.detectChanges();
+    }
+    get step() {
+        return coerceNumberProperty(this._hostElement.step);
+    }
+    set step(v) {
+        this._hostElement.step = coerceNumberProperty(v).toString();
+        this._cdr.detectChanges();
+    }
+    get disabled() {
+        return coerceBooleanProperty(this._hostElement.disabled);
+    }
+    set disabled(v) {
+        this._hostElement.disabled = coerceBooleanProperty(v);
+        this._cdr.detectChanges();
+        if (this._slider.disabled !== this.disabled) {
+            this._slider.disabled = this.disabled;
         }
     }
-    /** Save the event handler so it can be used in our global change event listener subscription. */
-    _saveChangeEventHandler(thumbPosition, handler) {
-        if (thumbPosition === Thumb.START) {
-            this._startInputChangeEventHandler = handler;
+    get percentage() {
+        if (this._slider.min >= this._slider.max) {
+            return this._slider._isRtl ? 1 : 0;
+        }
+        return (this.value - this._slider.min) / (this._slider.max - this._slider.min);
+    }
+    get fillPercentage() {
+        if (!this._slider._cachedWidth) {
+            return this._slider._isRtl ? 1 : 0;
+        }
+        if (this._translateX === 0) {
+            return 0;
+        }
+        return this.translateX / this._slider._cachedWidth;
+    }
+    /** Used to relay updates to _isFocused to the slider visual thumbs. */
+    _setIsFocused(v) {
+        this._isFocused = v;
+    }
+    ngOnDestroy() {
+        this._hostElement.removeEventListener('pointerdown', this._onPointerDown);
+        this._hostElement.removeEventListener('pointermove', this._onPointerMove);
+        this._hostElement.removeEventListener('pointerup', this._onPointerUp);
+        this._destroyed.next();
+        this._destroyed.complete();
+        this.dragStart.complete();
+        this.dragEnd.complete();
+    }
+    initProps() {
+        this._updateWidthInactive();
+        this.disabled = this._slider.disabled;
+        this.step = this._slider.step;
+        this.min = this._slider.min;
+        this.max = this._slider.max;
+        this._initValue();
+    }
+    initUI() {
+        this._updateThumbUIByValue();
+    }
+    _initValue() {
+        this._hasSetInitialValue = true;
+        if (this._initialValue === undefined) {
+            this.value = this._getDefaultValue();
         }
         else {
-            this._endInputChangeEventHandler = handler;
+            this._hostElement.value = this._initialValue;
+            this._updateThumbUIByValue();
+            this._slider._onValueChange(this);
+            this._cdr.detectChanges();
+        }
+    }
+    _getDefaultValue() {
+        return this.min;
+    }
+    _onBlur() {
+        this._setIsFocused(false);
+        this._onTouchedFn();
+    }
+    _onFocus() {
+        this._setIsFocused(true);
+    }
+    _onChange() {
+        // only used to handle the edge case where user
+        // mousedown on the slider then uses arrow keys.
+        if (this._isActive) {
+            this._updateThumbUIByValue({ withAnimation: true });
+        }
+    }
+    _onInput() {
+        this.valueChange.emit(this.value);
+        this._onChangeFn(this.value);
+        // handles arrowing and updating the value when
+        // a step is defined.
+        if (this._slider.step || !this._isActive) {
+            this._updateThumbUIByValue({ withAnimation: true });
+        }
+        this._slider._onValueChange(this);
+    }
+    _onNgControlValueChange() {
+        // only used to handle when the value change
+        // originates outside of the slider.
+        if (!this._isActive || !this._isFocused) {
+            this._slider._onValueChange(this);
+            this._updateThumbUIByValue();
+        }
+        this._slider.disabled = this._formControl.disabled;
+    }
+    _onPointerDown(event) {
+        if (this.disabled || event.button !== 0) {
+            return;
+        }
+        this._isActive = true;
+        this._setIsFocused(true);
+        this._updateWidthActive();
+        this._slider._updateDimensions();
+        // Does nothing if a step is defined because we
+        // want the value to snap to the values on input.
+        if (!this._slider.step) {
+            this._updateThumbUIByPointerEvent(event, { withAnimation: true });
+        }
+        if (!this.disabled) {
+            this._handleValueCorrection(event);
         }
     }
     /**
-     * Returns the thumb position of the given event target.
-     * Returns null if the given event target does not correspond to a slider thumb input.
+     * Corrects the value of the slider on pointer up/down.
+     *
+     * Called on pointer down and up because the value is set based
+     * on the inactive width instead of the active width.
      */
-    _getInputThumbPosition(target) {
-        if (target === this._delegate._getInputElement(Thumb.END)) {
-            return Thumb.END;
+    _handleValueCorrection(event) {
+        // Don't update the UI with the current value! The value on pointerdown
+        // and pointerup is calculated in the split second before the input(s)
+        // resize. See _updateWidthInactive() and _updateWidthActive() for more
+        // details.
+        this._skipUIUpdate = true;
+        // Note that this function gets triggered before the actual value of the
+        // slider is updated. This means if we were to set the value here, it
+        // would immediately be overwritten. Using setTimeout ensures the setting
+        // of the value happens after the value has been updated by the
+        // pointerdown event.
+        setTimeout(() => {
+            this._skipUIUpdate = false;
+            this._fixValue(event);
+        }, 0);
+    }
+    /** Corrects the value of the slider based on the pointer event's position. */
+    _fixValue(event) {
+        const xPos = event.clientX - this._slider._cachedLeft;
+        const width = this._slider._cachedWidth;
+        const step = this._slider.step === 0 ? 1 : this._slider.step;
+        const numSteps = Math.floor((this._slider.max - this._slider.min) / step);
+        const percentage = this._slider._isRtl ? 1 - xPos / width : xPos / width;
+        // To ensure the percentage is rounded to the necessary number of decimals.
+        const fixedPercentage = Math.round(percentage * numSteps) / numSteps;
+        const impreciseValue = fixedPercentage * (this._slider.max - this._slider.min) + this._slider.min;
+        const value = Math.round(impreciseValue / step) * step;
+        const prevValue = this.value;
+        const dragEvent = { source: this, parent: this._slider, value: value };
+        this._isActive ? this.dragStart.emit(dragEvent) : this.dragEnd.emit(dragEvent);
+        if (value === prevValue) {
+            // Because we prevented UI updates, if it turns out that the race
+            // condition didn't happen and the value is already correct, we
+            // have to apply the ui updates now.
+            this._slider._onValueChange(this);
+            this._slider.step > 0
+                ? this._updateThumbUIByValue()
+                : this._updateThumbUIByPointerEvent(event, { withAnimation: this._slider._hasAnimation });
+            return;
         }
-        if (this._delegate._isRange() && target === this._delegate._getInputElement(Thumb.START)) {
-            return Thumb.START;
+        this.value = value;
+        this.valueChange.emit(this.value);
+        this._onChangeFn(this.value);
+        this._slider._onValueChange(this);
+        this._slider.step > 0
+            ? this._updateThumbUIByValue()
+            : this._updateThumbUIByPointerEvent(event, { withAnimation: this._slider._hasAnimation });
+    }
+    _onPointerMove(event) {
+        // Again, does nothing if a step is defined because
+        // we want the value to snap to the values on input.
+        if (!this._slider.step && this._isActive) {
+            this._updateThumbUIByPointerEvent(event);
         }
-        return null;
     }
-}
-/** Ensures that there is not an invalid configuration for the slider thumb inputs. */
-function _validateInputs(isRange, startInputElement, endInputElement) {
-    const startValid = !isRange || startInputElement.hasAttribute('matSliderStartThumb');
-    const endValid = endInputElement.hasAttribute(isRange ? 'matSliderEndThumb' : 'matSliderThumb');
-    if (!startValid || !endValid) {
-        _throwInvalidInputConfigurationError();
+    _onPointerUp(event) {
+        this._isActive = false;
+        this._updateWidthInactive();
+        if (!this.disabled) {
+            this._handleValueCorrection(event);
+        }
     }
-}
-/** Validates that the slider has the correct set of thumbs. */
-function _validateThumbs(isRange, start, end) {
-    if (!end && (!isRange || !start)) {
-        _throwInvalidInputConfigurationError();
+    _clamp(v) {
+        return Math.max(Math.min(v, this._slider._cachedWidth), 0);
+    }
+    _calcTranslateXByValue() {
+        if (this._slider._isRtl) {
+            return (1 - this.percentage) * this._slider._cachedWidth;
+        }
+        return this.percentage * this._slider._cachedWidth;
+    }
+    _calcTranslateXByPointerEvent(event) {
+        return event.clientX - this._slider._cachedLeft;
+    }
+    /**
+     * Used to set the slider width to the correct
+     * dimensions while the user is dragging.
+     */
+    _updateWidthActive() {
+        this._hostElement.style.padding = `0 ${this._slider._inputPadding}px`;
+        this._hostElement.style.width = `calc(100% + ${this._slider._inputPadding}px)`;
+    }
+    /**
+     * Sets the slider input to disproportionate dimensions to allow for touch
+     * events to be captured on touch devices.
+     */
+    _updateWidthInactive() {
+        this._hostElement.style.padding = '0px';
+        this._hostElement.style.width = 'calc(100% + 48px)';
+        this._hostElement.style.left = '-24px';
+    }
+    _updateThumbUIByValue(options) {
+        this.translateX = this._clamp(this._calcTranslateXByValue());
+        this._updateThumbUI(options);
+    }
+    _updateThumbUIByPointerEvent(event, options) {
+        this.translateX = this._clamp(this._calcTranslateXByPointerEvent(event));
+        this._updateThumbUI(options);
+    }
+    _updateThumbUI(options) {
+        this._slider._setTransition(!!options?.withAnimation);
+        this._slider._onTranslateXChange(this);
+    }
+    /**
+     * Sets the input's value.
+     * @param value The new value of the input
+     * @docs-private
+     */
+    writeValue(value) {
+        this.value = value;
+    }
+    /**
+     * Registers a callback to be invoked when the input's value changes from user input.
+     * @param fn The callback to register
+     * @docs-private
+     */
+    registerOnChange(fn) {
+        this._onChangeFn = fn;
+    }
+    /**
+     * Registers a callback to be invoked when the input is blurred by the user.
+     * @param fn The callback to register
+     * @docs-private
+     */
+    registerOnTouched(fn) {
+        this._onTouchedFn = fn;
+    }
+    /**
+     * Sets the disabled state of the slider.
+     * @param isDisabled The new disabled state
+     * @docs-private
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    focus() {
+        this._hostElement.focus();
+    }
+    blur() {
+        this._hostElement.blur();
     }
 }
-function _throwInvalidInputConfigurationError() {
-    throw Error(`Invalid slider thumb input configuration!
-
-  Valid configurations are as follows:
-
-    <mat-slider>
-      <input matSliderThumb>
-    </mat-slider>
-
-    or
-
-    <mat-slider>
-      <input matSliderStartThumb>
-      <input matSliderEndThumb>
-    </mat-slider>
-  `);
+MatSliderThumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSliderThumb, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MAT_SLIDER }], target: i0.ɵɵFactoryTarget.Directive });
+MatSliderThumb.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-rc.1", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: { value: "value" }, outputs: { valueChange: "valueChange", dragStart: "dragStart", dragEnd: "dragEnd" }, host: { attributes: { "type": "range" }, listeners: { "change": "_onChange()", "input": "_onInput()", "blur": "_onBlur()", "focus": "_onFocus()" }, properties: { "attr.aria-valuetext": "_valuetext" }, classAttribute: "mdc-slider__input" }, providers: [
+        MAT_SLIDER_THUMB_VALUE_ACCESSOR,
+        { provide: MAT_SLIDER_THUMB, useExisting: MatSliderThumb },
+    ], exportAs: ["matSliderThumb"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSliderThumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[matSliderThumb]',
+                    exportAs: 'matSliderThumb',
+                    host: {
+                        'class': 'mdc-slider__input',
+                        'type': 'range',
+                        '[attr.aria-valuetext]': '_valuetext',
+                        '(change)': '_onChange()',
+                        '(input)': '_onInput()',
+                        // TODO(wagnermaciel): Consider using a global event listener instead.
+                        // Reason: I have found a semi-consistent way to mouse up without triggering this event.
+                        '(blur)': '_onBlur()',
+                        '(focus)': '_onFocus()',
+                    },
+                    providers: [
+                        MAT_SLIDER_THUMB_VALUE_ACCESSOR,
+                        { provide: MAT_SLIDER_THUMB, useExisting: MatSliderThumb },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_SLIDER]
+                }] }]; }, propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], dragStart: [{
+                type: Output
+            }], dragEnd: [{
+                type: Output
+            }] } });
+class MatSliderRangeThumb extends MatSliderThumb {
+    constructor(_ngZone, _slider, _elementRef, _cdr) {
+        super(_ngZone, _elementRef, _cdr, _slider);
+        this._cdr = _cdr;
+        this._isEndThumb = this._hostElement.hasAttribute('matSliderEndThumb');
+        this._setIsLeftThumb();
+        this.thumbPosition = this._isEndThumb ? 2 /* _MatThumb.END */ : 1 /* _MatThumb.START */;
+    }
+    getSibling() {
+        if (!this._sibling) {
+            this._sibling = this._slider._getInput(this._isEndThumb ? 1 /* _MatThumb.START */ : 2 /* _MatThumb.END */);
+        }
+        return this._sibling;
+    }
+    /** Returns the minimum translateX position allowed for this slider input's visual thumb. */
+    getMinPos() {
+        const sibling = this.getSibling();
+        if (!this._isLeftThumb && sibling) {
+            return sibling.translateX;
+        }
+        return 0;
+    }
+    /** Returns the maximum translateX position allowed for this slider input's visual thumb. */
+    getMaxPos() {
+        const sibling = this.getSibling();
+        if (this._isLeftThumb && sibling) {
+            return sibling.translateX;
+        }
+        return this._slider._cachedWidth;
+    }
+    _setIsLeftThumb() {
+        this._isLeftThumb =
+            (this._isEndThumb && this._slider._isRtl) || (!this._isEndThumb && !this._slider._isRtl);
+    }
+    _getDefaultValue() {
+        return this._isEndThumb && this._slider._isRange ? this.max : this.min;
+    }
+    _onInput() {
+        super._onInput();
+        this._updateSibling();
+        if (!this._isActive) {
+            this._updateWidthInactive();
+        }
+    }
+    _onNgControlValueChange() {
+        super._onNgControlValueChange();
+        this.getSibling()?._updateMinMax();
+    }
+    _onPointerDown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (this._sibling) {
+            this._sibling._updateWidthActive();
+            this._sibling._hostElement.classList.add('mat-mdc-slider-input-no-pointer-events');
+        }
+        super._onPointerDown(event);
+    }
+    _onPointerUp(event) {
+        super._onPointerUp(event);
+        if (this._sibling) {
+            this._sibling._updateWidthInactive();
+            this._sibling._hostElement.classList.remove('mat-mdc-slider-input-no-pointer-events');
+        }
+    }
+    _onPointerMove(event) {
+        super._onPointerMove(event);
+        if (!this._slider.step && this._isActive) {
+            this._updateSibling();
+        }
+    }
+    _fixValue(event) {
+        super._fixValue(event);
+        this._sibling?._updateMinMax();
+    }
+    _clamp(v) {
+        return Math.max(Math.min(v, this.getMaxPos()), this.getMinPos());
+    }
+    _updateMinMax() {
+        const sibling = this.getSibling();
+        if (!sibling) {
+            return;
+        }
+        if (this._isEndThumb) {
+            this.min = Math.max(this._slider.min, sibling.value);
+            this.max = this._slider.max;
+        }
+        else {
+            this.min = this._slider.min;
+            this.max = Math.min(this._slider.max, sibling.value);
+        }
+    }
+    _updateWidthActive() {
+        const minWidth = this._slider._rippleRadius * 2 - this._slider._inputPadding * 2;
+        const maxWidth = this._slider._cachedWidth + this._slider._inputPadding - minWidth;
+        const percentage = this._slider.min < this._slider.max
+            ? (this.max - this.min) / (this._slider.max - this._slider.min)
+            : 1;
+        const width = maxWidth * percentage + minWidth;
+        this._hostElement.style.width = `${width}px`;
+        this._hostElement.style.padding = `0 ${this._slider._inputPadding}px`;
+    }
+    _updateWidthInactive() {
+        const sibling = this.getSibling();
+        if (!sibling) {
+            return;
+        }
+        const maxWidth = this._slider._cachedWidth;
+        const midValue = this._isEndThumb
+            ? this.value - (this.value - sibling.value) / 2
+            : this.value + (sibling.value - this.value) / 2;
+        const _percentage = this._isEndThumb
+            ? (this.max - midValue) / (this._slider.max - this._slider.min)
+            : (midValue - this.min) / (this._slider.max - this._slider.min);
+        const percentage = this._slider.min < this._slider.max ? _percentage : 1;
+        const width = maxWidth * percentage + 24;
+        this._hostElement.style.width = `${width}px`;
+        this._hostElement.style.padding = '0px';
+        if (this._isLeftThumb) {
+            this._hostElement.style.left = '-24px';
+            this._hostElement.style.right = 'auto';
+        }
+        else {
+            this._hostElement.style.left = 'auto';
+            this._hostElement.style.right = '-24px';
+        }
+    }
+    _updateStaticStyles() {
+        this._hostElement.classList.toggle('mat-slider__right-input', !this._isLeftThumb);
+    }
+    _updateSibling() {
+        const sibling = this.getSibling();
+        if (!sibling) {
+            return;
+        }
+        sibling._updateMinMax();
+        if (this._isActive) {
+            sibling._updateWidthActive();
+        }
+        else {
+            sibling._updateWidthInactive();
+        }
+    }
+    /**
+     * Sets the input's value.
+     * @param value The new value of the input
+     * @docs-private
+     */
+    writeValue(value) {
+        this.value = value;
+        this._updateWidthInactive();
+        this._updateSibling();
+    }
 }
+MatSliderRangeThumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSliderRangeThumb, deps: [{ token: i0.NgZone }, { token: MAT_SLIDER }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+MatSliderRangeThumb.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-rc.1", type: MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", providers: [
+        MAT_SLIDER_RANGE_THUMB_VALUE_ACCESSOR,
+        { provide: MAT_SLIDER_RANGE_THUMB, useExisting: MatSliderRangeThumb },
+    ], exportAs: ["matSliderRangeThumb"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSliderRangeThumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[matSliderStartThumb], input[matSliderEndThumb]',
+                    exportAs: 'matSliderRangeThumb',
+                    providers: [
+                        MAT_SLIDER_RANGE_THUMB_VALUE_ACCESSOR,
+                        { provide: MAT_SLIDER_RANGE_THUMB, useExisting: MatSliderRangeThumb },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_SLIDER]
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * @license
@@ -1155,15 +1562,15 @@ function _throwInvalidInputConfigurationError() {
  */
 class MatSliderModule {
 }
-MatSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.0", ngImport: i0, type: MatSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MatSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0-rc.0", ngImport: i0, type: MatSliderModule, declarations: [MatSlider, MatSliderThumb, MatSliderVisualThumb], imports: [MatCommonModule, CommonModule, MatRippleModule], exports: [MatSlider, MatSliderThumb] });
-MatSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-rc.0", ngImport: i0, type: MatSliderModule, imports: [MatCommonModule, CommonModule, MatRippleModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.0", ngImport: i0, type: MatSliderModule, decorators: [{
+MatSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MatSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSliderModule, declarations: [MatSlider, MatSliderThumb, MatSliderRangeThumb, MatSliderVisualThumb], imports: [MatCommonModule, CommonModule, MatRippleModule], exports: [MatSlider, MatSliderThumb, MatSliderRangeThumb] });
+MatSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSliderModule, imports: [MatCommonModule, CommonModule, MatRippleModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MatCommonModule, CommonModule, MatRippleModule],
-                    exports: [MatSlider, MatSliderThumb],
-                    declarations: [MatSlider, MatSliderThumb, MatSliderVisualThumb],
+                    exports: [MatSlider, MatSliderThumb, MatSliderRangeThumb],
+                    declarations: [MatSlider, MatSliderThumb, MatSliderRangeThumb, MatSliderVisualThumb],
                 }]
         }] });
 
@@ -1187,5 +1594,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.0", ng
  * Generated bundle index. Do not edit.
  */
 
-export { MatSlider, MatSliderModule, MatSliderThumb };
+export { MatSlider, MatSliderModule, MatSliderRangeThumb, MatSliderThumb, MatSliderVisualThumb };
 //# sourceMappingURL=slider.mjs.map