fix(material/slider): handle null values in slider input (#30621)

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

Fixes #30614

Author: mistrykaran91

src/material/slider/slider-input.ts

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

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';
@@ -1314,6 +1314,25 @@ describe('MatSlider', () => {
     }));
   });
 
+  describe('slider with form group', () => {
+    it('should reset to initial min-max value when form reset is done', fakeAsync(() => {
+      const fixture = createComponent(SliderWithFormGroup);
+      fixture.detectChanges();
+      const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider));
+      const slider = sliderDebugElement.componentInstance;
+      const minInput = slider._getInput(_MatThumb.START) as MatSliderRangeThumb;
+      const maxInput = slider._getInput(_MatThumb.END) as MatSliderRangeThumb;
+      flush();
+
+      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);
+    }));
+  });
+
   describe('slider as a custom form control', () => {
     let fixture: ComponentFixture<SliderWithFormControl>;
     let slider: MatSlider;
@@ -2024,6 +2043,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 === undefined || v === null || 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 === undefined || v === null || isNaN(v) ? this._max : v;
     if (this._max !== max) {
       this._updateMax(max);
     }