fix(material/slider): prevent out of memory errors from tick marks on…

src/material/slider/slider.spec.ts

@@ -1722,6 +1722,38 @@ describe('MatSlider', () => {
       expect(tickEls.inactive.length).toBe(100);
     });
   });
+
+  describe('slider with tick marks that does not have a width', () => {
+    it('should not compute the tick marks until the slider has a width', () => {
+      const fixture = createComponent(SliderWithTickMarks);
+      fixture.nativeElement.style.display = 'none';
+      fixture.detectChanges();
+      const slider = fixture.componentInstance.slider;
+      expect(slider._tickMarks.length).toBe(0);
+
+      slider.max = 1000;
+      expect(slider._tickMarks.length).toBe(0);
+
+      fixture.nativeElement.style.display = '';
+      slider._onResize();
+      expect(slider._tickMarks.length).toBe(1001);
+    });
+
+    it('should not compute the tick marks of a range slider until it has a width', () => {
+      const fixture = createComponent(RangeSliderWithTickMarks);
+      fixture.nativeElement.style.display = 'none';
+      fixture.detectChanges();
+      const slider = fixture.componentInstance.slider;
+      expect(slider._tickMarks.length).toBe(0);
+
+      slider.max = 1000;
+      expect(slider._tickMarks.length).toBe(0);
+
+      fixture.nativeElement.style.display = '';
+      slider._onResize();
+      expect(slider._tickMarks.length).toBe(1001);
+    });
+  });
 });
 
 const SLIDER_STYLES = ['.mat-mdc-slider { width: 300px; }'];

src/material/slider/slider.ts

@@ -366,7 +366,7 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
   @Input() displayWith: (value: number) => string = (value: number) => `${value}`;
 
   /** Used to keep track of & render the active & inactive tick marks on the slider track. */
-  _tickMarks!: _MatTickMark[];
+  _tickMarks: _MatTickMark[] = [];
 
   /** Whether animations have been disabled. */
   _noopAnimations = _animationsDisabled();
@@ -874,6 +874,9 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
   _updateTickMarkUI(): void {
     if (
       !this.showTickMarks ||
+      // Tick marks aren't rendered until the slider has a width (e.g. they never are on the
+      // server) so skip computing them until then since it can be expensive for large ranges.
+      !this._cachedWidth ||
       this.step === undefined ||
       this.min === undefined ||
       this.max === undefined