perf(material/slider): use flex to position tick marks

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;
-  }
-}

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>

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 1px;
+  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...) {

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 {

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;