fix(material/slider): update inactive input width on value change (#2…

…8275)

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

* fixes #28206

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

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

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.spec.ts

@@ -1022,6 +1022,32 @@ describe('MDC-based MatSlider', () => {
       fixture.detectChanges();
       expect(endInput.value).toBe(70);
     });
+
+    it('should update the input width when the start value changes', () => {
+      const startInputEl = startInput._elementRef.nativeElement;
+      const endInputEl = endInput._elementRef.nativeElement;
+      const startInputWidthBefore = startInputEl.getBoundingClientRect().width;
+      const endInputWidthBefore = endInputEl.getBoundingClientRect().width;
+      fixture.componentInstance.startValue = 10;
+      fixture.detectChanges();
+      const startInputWidthAfter = startInputEl.getBoundingClientRect().width;
+      const endInputWidthAfter = endInputEl.getBoundingClientRect().width;
+      expect(startInputWidthBefore).not.toBe(startInputWidthAfter);
+      expect(endInputWidthBefore).not.toBe(endInputWidthAfter);
+    });
+
+    it('should update the input width when the end value changes', () => {
+      const startInputEl = startInput._elementRef.nativeElement;
+      const endInputEl = endInput._elementRef.nativeElement;
+      const startInputWidthBefore = startInputEl.getBoundingClientRect().width;
+      const endInputWidthBefore = endInputEl.getBoundingClientRect().width;
+      fixture.componentInstance.endValue = 90;
+      fixture.detectChanges();
+      const startInputWidthAfter = startInputEl.getBoundingClientRect().width;
+      const endInputWidthAfter = endInputEl.getBoundingClientRect().width;
+      expect(startInputWidthBefore).not.toBe(startInputWidthAfter);
+      expect(endInputWidthBefore).not.toBe(endInputWidthAfter);
+    });
   });
 
   describe('slider with direction', () => {

tools/public_api_guard/material/slider.md

@@ -180,6 +180,8 @@ export class MatSliderRangeThumb extends MatSliderThumb implements _MatSliderRan
     // (undocumented)
     _setIsLeftThumb(): void;
     // (undocumented)
+    _setValue(value: string): void;
+    // (undocumented)
     _updateMinMax(): void;
     // (undocumented)
     _updateStaticStyles(): void;
@@ -261,6 +263,7 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
+    protected _setValue(value: string): void;
     _skipUIUpdate: boolean;
     // (undocumented)
     protected _slider: _MatSlider;