fix(material/slider): slider tx imprecision (#28283)

* Fixes a bug where the slider's min and max value could go beyond the first and last tick marks.
  This caused the slider thumb to never truly line up with the tick marks except at the exact center
  of the slider track.

Author: wagnermaciel

src/material/slider/slider-input.ts

@@ -130,7 +130,7 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
    */
   get translateX(): number {
     if (this._slider.min >= this._slider.max) {
-      this._translateX = 0;
+      this._translateX = this._tickMarkOffset;
       return this._translateX;
     }
     if (this._translateX === undefined) {
@@ -216,6 +216,9 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
   /** The radius of a native html slider's knob. */
   _knobRadius: number = 8;
 
+  /** The distance in px from the start of the slider track to the first tick mark. */
+  _tickMarkOffset = 3;
+
   /** Whether user's cursor is currently in a mouse down state on the input. */
   _isActive: boolean = false;
 
@@ -490,15 +493,22 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
   }
 
   _clamp(v: number): number {
-    return Math.max(Math.min(v, this._slider._cachedWidth), 0);
+    const min = this._tickMarkOffset;
+    const max = this._slider._cachedWidth - this._tickMarkOffset;
+    return Math.max(Math.min(v, max), min);
   }
 
   _calcTranslateXByValue(): number {
     if (this._slider._isRtl) {
-      return (1 - this.percentage) * this._slider._cachedWidth;
+      return (
+        (1 - this.percentage) * (this._slider._cachedWidth - this._tickMarkOffset * 2) +
+        this._tickMarkOffset
+      );
     }
-    const tickMarkOffset = 3; // The spaces before & after the start & end tick marks.
-    return this.percentage * (this._slider._cachedWidth - tickMarkOffset * 2) + tickMarkOffset;
+    return (
+      this.percentage * (this._slider._cachedWidth - this._tickMarkOffset * 2) +
+      this._tickMarkOffset
+    );
   }
 
   _calcTranslateXByPointerEvent(event: PointerEvent): number {
@@ -509,19 +519,18 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
    * Used to set the slider width to the correct
    * dimensions while the user is dragging.
    */
-  _updateWidthActive(): void {
-    this._hostElement.style.padding = `0 ${this._slider._inputPadding}px`;
-    this._hostElement.style.width = `calc(100% + ${this._slider._inputPadding}px)`;
-  }
+  _updateWidthActive(): void {}
 
   /**
    * Sets the slider input to disproportionate dimensions to allow for touch
    * events to be captured on touch devices.
    */
   _updateWidthInactive(): void {
-    this._hostElement.style.padding = '0px';
-    this._hostElement.style.width = 'calc(100% + 48px)';
-    this._hostElement.style.left = '-24px';
+    this._hostElement.style.padding = `0 ${this._slider._inputPadding}px`;
+    this._hostElement.style.width = `calc(100% + ${
+      this._slider._inputPadding - this._tickMarkOffset * 2
+    }px)`;
+    this._hostElement.style.left = `-${this._slider._rippleRadius - this._tickMarkOffset}px`;
   }
 
   _updateThumbUIByValue(options?: {withAnimation: boolean}): void {
@@ -617,7 +626,7 @@ export class MatSliderRangeThumb extends MatSliderThumb implements _MatSliderRan
     if (!this._isLeftThumb && sibling) {
       return sibling.translateX;
     }
-    return 0;
+    return this._tickMarkOffset;
   }
 
   /**
@@ -629,7 +638,7 @@ export class MatSliderRangeThumb extends MatSliderThumb implements _MatSliderRan
     if (this._isLeftThumb && sibling) {
       return sibling.translateX;
     }
-    return this._slider._cachedWidth;
+    return this._slider._cachedWidth - this._tickMarkOffset;
   }
 
   _setIsLeftThumb(): void {
@@ -725,7 +734,8 @@ export class MatSliderRangeThumb extends MatSliderThumb implements _MatSliderRan
 
   override _updateWidthActive(): void {
     const minWidth = this._slider._rippleRadius * 2 - this._slider._inputPadding * 2;
-    const maxWidth = this._slider._cachedWidth + this._slider._inputPadding - minWidth;
+    const maxWidth =
+      this._slider._cachedWidth + this._slider._inputPadding - minWidth - this._tickMarkOffset * 2;
     const percentage =
       this._slider.min < this._slider.max
         ? (this.max - this.min) / (this._slider.max - this._slider.min)
@@ -740,7 +750,7 @@ export class MatSliderRangeThumb extends MatSliderThumb implements _MatSliderRan
     if (!sibling) {
       return;
     }
-    const maxWidth = this._slider._cachedWidth;
+    const maxWidth = this._slider._cachedWidth - this._tickMarkOffset * 2;
     const midValue = this._isEndThumb
       ? this.value - (this.value - sibling.value) / 2
       : this.value + (sibling.value - this.value) / 2;
@@ -768,11 +778,11 @@ export class MatSliderRangeThumb extends MatSliderThumb implements _MatSliderRan
     this._hostElement.style.padding = '0px';
 
     if (this._isLeftThumb) {
-      this._hostElement.style.left = '-24px';
+      this._hostElement.style.left = `-${this._slider._rippleRadius - this._tickMarkOffset}px`;
       this._hostElement.style.right = 'auto';
     } else {
       this._hostElement.style.left = 'auto';
-      this._hostElement.style.right = '-24px';
+      this._hostElement.style.right = `-${this._slider._rippleRadius - this._tickMarkOffset}px`;
     }
   }
 

src/material/slider/slider-interface.ts

@@ -121,18 +121,6 @@ export interface _MatSlider {
    */
   _inputPadding: number;
 
-  /**
-   * The offset represents left most translateX of the slider knob. Inversely,
-   * (slider width - offset) = the right most translateX of the slider knob.
-   *
-   * Note:
-   *    * The native slider knob differs from the visual slider. It's knob cannot slide past
-   *      the end of the track AT ALL.
-   *    * The visual slider knob CAN slide past the end of the track slightly. It's knob can slide
-   *      past the end of the track such that it's center lines up with the end of the track.
-   */
-  _inputOffset: number;
-
   /** The radius of the visual slider's ripple. */
   _rippleRadius: number;
 

src/material/slider/slider.spec.ts

@@ -60,15 +60,23 @@ describe('MDC-based MatSlider', () => {
     expect(input.max).withContext('max').toBe(max);
     expect(input.value).withContext('value').toBe(value);
 
-    // 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.
+    // The discrepancy between the "ideal" and "actual" translateX comes from
+    // the 3px offset from the start & end of the slider track to the first
+    // and last tick marks.
     //
-    // 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)
+    // The "actual" translateX is calculated based on a slider that is 6px
+    // smaller than the width of the slider. Using this "actual" translateX in
+    // tests would make it even more difficult than it already is to tell if
+    // the translateX is off, so we abstract things in here so tests can be
+    // more intuitive.
+    //
+    // The most clear way to compare the two tx's is to just turn them into
+    // percentages by dividing by their (total height) / 100.
+    const idealTXPercentage = Math.round(translateX / 3);
+    const actualTXPercentage = Math.round((input.translateX - 3) / 2.94);
+    expect(actualTXPercentage)
       .withContext(`translateX: ${input.translateX} should be close to ${translateX}`)
-      .toBeTrue();
+      .toBe(idealTXPercentage);
     if (step !== undefined) {
       expect(input.step).withContext('step').toBe(step);
     }

src/material/slider/slider.ts

@@ -408,7 +408,6 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
   _knobRadius: number = 8;
 
   _inputPadding: number;
-  _inputOffset: number;
 
   ngAfterViewInit(): void {
     if (this._platform.isBrowser) {
@@ -431,7 +430,6 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     const thumb = this._getThumb(_MatThumb.END);
     this._rippleRadius = thumb._ripple.radius;
     this._inputPadding = this._rippleRadius - this._knobRadius;
-    this._inputOffset = this._knobRadius;
 
     this._isRange
       ? this._initUIRange(eInput as _MatSliderRangeThumb, sInput as _MatSliderRangeThumb)

tools/public_api_guard/material/slider.md

@@ -52,8 +52,6 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     _hasAnimation: boolean;
     _input: _MatSliderThumb;
     // (undocumented)
-    _inputOffset: number;
-    // (undocumented)
     _inputPadding: number;
     _inputs: QueryList<_MatSliderRangeThumb>;
     _isCursorOnSliderThumb(event: PointerEvent, rect: DOMRect): boolean;
@@ -271,6 +269,7 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
     get step(): number;
     set step(v: number);
     thumbPosition: _MatThumb;
+    _tickMarkOffset: number;
     get translateX(): number;
     set translateX(v: number);
     // (undocumented)