fix(material/slider): handle null and undefined values in slider input

The slider values behaved inconsistently when we reset the formGroup. This MR will resolve that issue by setting `value` to default value when its `undefined` or `null`

Fixes #30614

Author: mistrykaran91

src/material/slider/slider-input.ts

@@ -96,7 +96,10 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
     return numberAttribute(this._hostElement.value, 0);
   }
   set value(value: number) {
-    value = isNaN(value) ? 0 : value;
+    value = value && isNaN(value) ? 0 : value;
+    if (value === null || value === undefined) {
+      value = this._getDefaultValue();
+    }
     const stringValue = value + '';
     if (!this._hasSetInitialValue) {
       this._initialValue = stringValue;

src/material/slider/slider.spec.ts

@@ -18,7 +18,7 @@ import {
   tick,
   waitForAsync,
 } from '@angular/core/testing';
-import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {of} from 'rxjs';
 import {MatSliderModule} from './module';
@@ -1706,6 +1706,31 @@ describe('MatSlider', () => {
       expect(tickEls.inactive.length).toBe(100);
     });
   });
+
+  describe('slider with form group', () => {
+    let fixture: ComponentFixture<SliderWithFormGroup>;
+    let slider: MatSlider;
+    let minInput: MatSliderThumb;
+    let maxInput: MatSliderThumb;
+
+    beforeEach(waitForAsync(() => {
+      fixture = createComponent(SliderWithFormGroup);
+      fixture.detectChanges();
+      const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider));
+      slider = sliderDebugElement.componentInstance;
+      minInput = slider._getInput(_MatThumb.START) as MatSliderRangeThumb;
+      maxInput = slider._getInput(_MatThumb.END) as MatSliderRangeThumb;
+    }));
+
+    it('should reset to initial min-max value when form reset is done', fakeAsync(() => {
+      expect(minInput.value).toBe(0);
+      expect(maxInput.value).toBe(10);
+      slideToValue(slider, minInput, 20);
+      fixture.componentInstance.fg.reset();
+      expect(minInput.value).toBe(0);
+      expect(maxInput.value).toBe(10);
+    }));
+  });
 });
 
 const SLIDER_STYLES = ['.mat-mdc-slider { width: 300px; }'];
@@ -2024,6 +2049,28 @@ class RangeSliderWithTickMarks {
   @ViewChild(MatSlider) slider: MatSlider;
 }
 
+@Component({
+  template: `
+  <div [formGroup]="fg" >
+    <mat-slider [min]="MIN" [max]="MAX" >
+      <input formControlName="min" matSliderStartThumb>
+      <input formControlName="max" matSliderEndThumb>
+    </mat-slider>
+  <div>
+  `,
+  styles: SLIDER_STYLES,
+  standalone: false,
+})
+class SliderWithFormGroup {
+  readonly MIN = 0;
+  readonly MAX = 10;
+
+  readonly fg = new FormGroup({
+    min: new FormControl<number | null>(null),
+    max: new FormControl<number | null>(null),
+  });
+}
+
 /** Clicks on the MatSlider at the coordinates corresponding to the given value. */
 function setValueByClick(
   slider: MatSlider,

src/material/slider/slider.ts

@@ -140,7 +140,7 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     return this._min;
   }
   set min(v: number) {
-    const min = isNaN(v) ? this._min : v;
+    const min = !v || isNaN(v) ? this._min : v;
     if (this._min !== min) {
       this._updateMin(min);
     }
@@ -216,7 +216,7 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     return this._max;
   }
   set max(v: number) {
-    const max = isNaN(v) ? this._max : v;
+    const max = !v || isNaN(v) ? this._max : v;
     if (this._max !== max) {
       this._updateMax(max);
     }