From 0f296dbb26fd2a6d0b05bbb6bae7c78536476e7d Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Thu, 9 Jan 2025 11:28:06 -0500
Subject: [PATCH 1/2] perf(material/slider): use flex to position tick marks

---
 src/material/slider/slider-thumb.scss     | 9 ---------
 src/material/slider/slider.html           | 4 +---
 src/material/slider/slider.scss           | 2 +-
 src/material/slider/slider.ts             | 7 -------
 tools/public_api_guard/material/slider.md | 1 -
 5 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/src/material/slider/slider-thumb.scss b/src/material/slider/slider-thumb.scss
index 48a4acb23f7f..e5cd1605936a 100644
--- a/src/material/slider/slider-thumb.scss
+++ b/src/material/slider/slider-thumb.scss
@@ -2,12 +2,3 @@
   height: 100%;
   width: 100%;
 }
-
-.mat-mdc-slider .mdc-slider__tick-marks {
-  justify-content: start;
-  .mdc-slider__tick-mark--active,
-  .mdc-slider__tick-mark--inactive {
-    position: absolute;
-    left: 2px;
-  }
-}
diff --git a/src/material/slider/slider.html b/src/material/slider/slider.html
index 23329ba40b40..794cd7ad1bde 100644
--- a/src/material/slider/slider.html
+++ b/src/material/slider/slider.html
@@ -11,9 +11,7 @@
     <div class="mdc-slider__tick-marks" #tickMarkContainer>
       @if (_cachedWidth) {
         @for (tickMark of _tickMarks; track i; let i = $index) {
-          <div
-            [class]="tickMark === 0 ? 'mdc-slider__tick-mark--active' : 'mdc-slider__tick-mark--inactive'"
-            [style.transform]="_calcTickMarkTransform(i)"></div>
+          <div [class]="tickMark === 0 ? 'mdc-slider__tick-mark--active' : 'mdc-slider__tick-mark--inactive'"></div>
         }
       }
     </div>
diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss
index 0e282262ca1a..df5afffedfa8 100644
--- a/src/material/slider/slider.scss
+++ b/src/material/slider/slider.scss
@@ -282,7 +282,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots());
   display: flex;
   height: 100%;
   justify-content: space-between;
-  padding: 0 1px;
+  padding: 0 2px;
   position: absolute;
   width: 100%;
 }
diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts
index 74808591eb4a..96855c32980d 100644
--- a/src/material/slider/slider.ts
+++ b/src/material/slider/slider.ts
@@ -587,13 +587,6 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     trackStyle.transform = styles.transform;
   }
 
-  /** Returns the translateX positioning for a tick mark based on it's index. */
-  _calcTickMarkTransform(index: number): string {
-    // 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: _MatSliderThumb): void {
diff --git a/tools/public_api_guard/material/slider.md b/tools/public_api_guard/material/slider.md
index 3ef7b8ab020b..0d2a1be602d1 100644
--- a/tools/public_api_guard/material/slider.md
+++ b/tools/public_api_guard/material/slider.md
@@ -28,7 +28,6 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     _cachedLeft: number;
     // (undocumented)
     _cachedWidth: number;
-    _calcTickMarkTransform(index: number): string;
     // (undocumented)
     readonly _cdr: ChangeDetectorRef;
     color: ThemePalette;

From 5210d4302c61c68f8d7142f89c2150512a0f363f Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Thu, 9 Jan 2025 14:24:24 -0500
Subject: [PATCH 2/2] fixup! perf(material/slider): use flex to position tick
 marks

---
 src/material/slider/slider.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss
index df5afffedfa8..79d6f533fcde 100644
--- a/src/material/slider/slider.scss
+++ b/src/material/slider/slider.scss
@@ -282,11 +282,17 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots());
   display: flex;
   height: 100%;
   justify-content: space-between;
-  padding: 0 2px;
+  padding: 0 4px;
   position: absolute;
   width: 100%;
 }
 
+.mdc-slider__tick-mark--active,
+.mdc-slider__tick-mark--inactive {
+  flex-shrink: 0;
+  margin: -2px;
+}
+
 .mdc-slider__tick-mark--active,
 .mdc-slider__tick-mark--inactive {
   @include token-utils.use-tokens($_mdc-slots...) {