fix(material/slider): add tick mark to end of slider

add tick mark to end of slider for visual users to see
end of slider. passes 3:1 color contrast ratio with
background

fixes b/286300099

Author: DBowen33

src/material/slider/slider.html

@@ -7,6 +7,16 @@
   <div class="mdc-slider__track--active">
     <div #trackActive class="mdc-slider__track--active_fill"></div>
   </div>
+  <div class="mdc-slider__end-tick-mark-container">
+    @if (_cachedWidth) {
+      @for (tickMark of _tickMarks; track i; let i = $index) {
+        <div 
+          class="mdc-slider__tick-mark--inactive"
+          [style]="_calcEndTickMarkTransform(i)">
+        </div>
+      }
+    }
+  </div>
   @if (showTickMarks) {
     <div class="mdc-slider__tick-marks" #tickMarkContainer>
       @if (_cachedWidth) {

src/material/slider/slider.scss

@@ -276,6 +276,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots());
   }
 }
 
+.mdc-slider__end-tick-mark-container,
 .mdc-slider__tick-marks {
   align-items: center;
   box-sizing: border-box;

src/material/slider/slider.ts

@@ -587,10 +587,29 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     trackStyle.transform = styles.transform;
   }
 
+  /**
+   * Returns the translateX positioning for the end tick mark to visually
+   * indicate the end of the slider
+   * */
+  _calcEndTickMarkTransform(index: number): string {
+    // Only show the last tick mark
+    if (index === this._tickMarks.length - 1) {
+      const translateX = this._tickMarkTrackWidth;
+      return `transform: translateX(${translateX}px)`;
+    } else {
+      // Hide other tick marks
+      return 'display: none';
+    }
+  }
+
   /** 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));
+    // Don't show last tick mark twice since last tick mark is permanent
+    if (index === this._tickMarks.length - 1) {
+      return `translateX(-100%)`;
+    }
     return `translateX(${translateX}px`;
   }
 

tools/public_api_guard/material/slider.md

@@ -28,6 +28,7 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     _cachedLeft: number;
     // (undocumented)
     _cachedWidth: number;
+    _calcEndTickMarkTransform(index: number): string;
     _calcTickMarkTransform(index: number): string;
     // (undocumented)
     readonly _cdr: ChangeDetectorRef;