fix(material/slider): fix tick mark precision (#28193)

* fix(material/slider): fix tick mark precision

* Fixes issue #26459
* Fixes a bug where the number of tick
  marks can be miscalculated when the
  step is a decimal (e.g. 1.5)

* fixup! fix(material/slider): fix tick mark precision

Author: wagnermaciel

src/material/slider/slider-input.ts

@@ -485,7 +485,8 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
     if (this._slider._isRtl) {
       return (1 - this.percentage) * this._slider._cachedWidth;
     }
-    return this.percentage * this._slider._cachedWidth;
+    const tickMarkOffset = 3; // The spaces before & after the start & end tick marks.
+    return this.percentage * (this._slider._cachedWidth - tickMarkOffset * 2) + tickMarkOffset;
   }
 
   _calcTranslateXByPointerEvent(event: PointerEvent): number {

src/material/slider/slider.spec.ts

@@ -59,7 +59,16 @@ describe('MDC-based MatSlider', () => {
     expect(input.min).withContext('min').toBe(min);
     expect(input.max).withContext('max').toBe(max);
     expect(input.value).withContext('value').toBe(value);
-    expect(input.translateX).withContext('translateX').toBeCloseTo(translateX, 0.1);
+
+    // Note: This ±6 is here to account for the slight shift of the slider
+    // thumb caused by the tick marks being 3px away from the track start
+    // and end.
+    //
+    // This check is meant to ensure the "ideal" estimate is within 3px of the
+    // actual slider thumb position.
+    expect(input.translateX - 6 < translateX && input.translateX + 6 > translateX)
+      .withContext(`translateX: ${input.translateX} should be close to ${translateX}`)
+      .toBeTrue();
     if (step !== undefined) {
       expect(input.step).withContext('step').toBe(step);
     }

src/material/slider/slider.ts

@@ -872,8 +872,8 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
 
   private _updateTickMarkUINonRange(step: number): void {
     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);
+    let numActive = Math.max(Math.floor((value - this.min) / step), 0);
+    let numInactive = Math.max(Math.floor((this.max - value) / step), 0);
     this._isRtl ? numActive++ : numInactive++;
 
     this._tickMarks = Array(numActive)