From cc627bc3c9a7d7d2cfbc5cf129954368c2d33d0e Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Thu, 1 Jun 2023 10:37:33 -0400
Subject: [PATCH 1/3] fix(material/slider): fix track getting out of sync

---
 src/material/slider/slider.scss | 12 ------------
 src/material/slider/slider.ts   | 15 +++------------
 2 files changed, 3 insertions(+), 24 deletions(-)

diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss
index 09e80484bda8..6a8ab7ab2932 100644
--- a/src/material/slider/slider.scss
+++ b/src/material/slider/slider.scss
@@ -58,12 +58,6 @@ $mat-slider-horizontal-margin: 8px !default;
     .mdc-slider__track--active_fill {
       transition-duration: 80ms;
     }
-
-    &.mat-mdc-slider-disable-track-animation {
-      .mdc-slider__track--active_fill {
-        transition-duration: 0ms;
-      }
-    }
   }
 
   // We need to repeat these styles to override discrete slider styling.
@@ -78,12 +72,6 @@ $mat-slider-horizontal-margin: 8px !default;
     .mdc-slider__track--active_fill {
       transition-duration: 80ms;
     }
-
-    &.mat-mdc-slider-disable-track-animation {
-      .mdc-slider__track--active_fill {
-        transition-duration: 0ms;
-      }
-    }
   }
 
   .mdc-slider__track,
diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts
index bc5134325249..3b0d9fd007ce 100644
--- a/src/material/slider/slider.ts
+++ b/src/material/slider/slider.ts
@@ -585,22 +585,11 @@ export class MatSlider
     transformOrigin: string;
   }): void {
     const trackStyle = this._trackActive.nativeElement.style;
-    const animationOriginChanged =
-      styles.left !== trackStyle.left && styles.right !== trackStyle.right;
 
     trackStyle.left = styles.left;
     trackStyle.right = styles.right;
     trackStyle.transformOrigin = styles.transformOrigin;
-
-    if (animationOriginChanged) {
-      this._elementRef.nativeElement.classList.add('mat-mdc-slider-disable-track-animation');
-      this._ngZone.onStable.pipe(take(1)).subscribe(() => {
-        this._elementRef.nativeElement.classList.remove('mat-mdc-slider-disable-track-animation');
-        trackStyle.transform = styles.transform;
-      });
-    } else {
-      trackStyle.transform = styles.transform;
-    }
+    trackStyle.transform = styles.transform;
   }
 
   /** Returns the translateX positioning for a tick mark based on it's index. */
@@ -913,6 +902,8 @@ export class MatSlider
   private _updateTickMarkUIRange(step: number): void {
     const endValue = this._getValue();
     const startValue = this._getValue(_MatThumb.START);
+
+    console.log(`end: ${endValue} start: ${startValue}`);
     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);

From 88e480d5e0f1afba7ec63115600a8a6d78836dc8 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Thu, 1 Jun 2023 18:08:02 -0400
Subject: [PATCH 2/3] fixup! fix(material/slider): fix track getting out of
 sync

---
 src/material/slider/slider.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts
index 3b0d9fd007ce..5ef41f938ff1 100644
--- a/src/material/slider/slider.ts
+++ b/src/material/slider/slider.ts
@@ -41,7 +41,6 @@ import {
 } from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {Subscription} from 'rxjs';
-import {take} from 'rxjs/operators';
 import {
   _MatThumb,
   _MatTickMark,

From dc758668a81e5e2f28cb94587f6555bb7b7806c5 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Fri, 2 Jun 2023 09:41:34 -0400
Subject: [PATCH 3/3] fixup! fix(material/slider): fix track getting out of
 sync

---
 src/material/slider/slider.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts
index 5ef41f938ff1..3be5c332793c 100644
--- a/src/material/slider/slider.ts
+++ b/src/material/slider/slider.ts
@@ -902,7 +902,6 @@ export class MatSlider
     const endValue = this._getValue();
     const startValue = this._getValue(_MatThumb.START);
 
-    console.log(`end: ${endValue} start: ${startValue}`);
     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);