fixup! fix(material/slider): update inactive input width on value change

Author: wagnermaciel

src/material/slider/slider-input.ts

@@ -98,12 +98,21 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
     if (this._isActive) {
       return;
     }
-    this._hostElement.value = stringValue;
+    this._setValue(stringValue);
+  }
+
+  /**
+   * Handles programmatic value setting. This has been split out to
+   * allow the range thumb to override it and add additional necessary logic.
+   */
+  protected _setValue(value: string) {
+    this._hostElement.value = value;
     this._updateThumbUIByValue();
     this._slider._onValueChange(this);
     this._cdr.detectChanges();
     this._slider._cdr.markForCheck();
   }
+
   /** Event emitted when the `value` is changed. */
   @Output() readonly valueChange: EventEmitter<number> = new EventEmitter<number>();
 
@@ -793,4 +802,10 @@ export class MatSliderRangeThumb extends MatSliderThumb implements _MatSliderRan
       this._updateSibling();
     }
   }
+
+  override _setValue(value: string) {
+    super._setValue(value);
+    this._updateWidthInactive();
+    this._updateSibling();
+  }
 }

src/material/slider/slider.ts

@@ -610,7 +610,6 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
       return;
     }
 
-    this._updateWidthInactive();
     this._updateValueIndicatorUI(source);
     this._updateTickMarkUI();
     this._cdr.detectChanges();
@@ -672,13 +671,6 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     return endInput.translateX - startInput.translateX < 20;
   }
 
-  private _updateWidthInactive(): void {
-    const eInput = this._getInput(_MatThumb.END);
-    const sInput = this._getInput(_MatThumb.START);
-    eInput?._updateWidthInactive();
-    sInput?._updateWidthInactive();
-  }
-
   /**
    * Updates the class names of overlapping slider thumbs so
    * that the current active thumb is styled to be on "top".