fix(material/slider): log proper error when slider isn't configured correctly (#29745)

Fixes that we were throwing a cryptic error if the slider isn't set up properly.

Fixes #29738.

Author: crisbeto

src/material/slider/slider-thumb.ts

@@ -110,14 +110,22 @@ export class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewIni
   }
 
   ngAfterViewInit() {
+    const sliderInput = this._slider._getInput(this.thumbPosition);
+
+    // No-op if the slider isn't configured properly. `MatSlider` will
+    // throw an error instructing the user how to set up the slider.
+    if (!sliderInput) {
+      return;
+    }
+
     this._ripple.radius = 24;
-    this._sliderInput = this._slider._getInput(this.thumbPosition)!;
+    this._sliderInput = sliderInput;
     this._sliderInputEl = this._sliderInput._hostElement;
-    const input = this._sliderInputEl;
 
     // These listeners don't update any data bindings so we bind them outside
     // of the NgZone to prevent Angular from needlessly running change detection.
     this._ngZone.runOutsideAngular(() => {
+      const input = this._sliderInputEl!;
       input.addEventListener('pointermove', this._onPointerMove);
       input.addEventListener('pointerdown', this._onDragStart);
       input.addEventListener('pointerup', this._onDragEnd);

src/material/slider/slider.ts

@@ -428,7 +428,7 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     if (typeof ngDevMode === 'undefined' || ngDevMode) {
       _validateInputs(
         this._isRange,
-        this._getInput(_MatThumb.END)!,
+        this._getInput(_MatThumb.END),
         this._getInput(_MatThumb.START),
       );
     }
@@ -938,12 +938,12 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
 /** Ensures that there is not an invalid configuration for the slider thumb inputs. */
 function _validateInputs(
   isRange: boolean,
-  endInputElement: _MatSliderThumb | _MatSliderRangeThumb,
-  startInputElement?: _MatSliderThumb,
+  endInputElement: _MatSliderThumb | _MatSliderRangeThumb | undefined,
+  startInputElement: _MatSliderThumb | undefined,
 ): void {
   const startValid =
     !isRange || startInputElement?._hostElement.hasAttribute('matSliderStartThumb');
-  const endValid = endInputElement._hostElement.hasAttribute(
+  const endValid = endInputElement?._hostElement.hasAttribute(
     isRange ? 'matSliderEndThumb' : 'matSliderThumb',
   );