From 705fe5490dc6837b83ea501fcae817f776d0ef6e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 6 Dec 2021 12:12:00 +0100
Subject: [PATCH] fix(material-experimental/mdc-slider): throw error when thumb
 is missing

Adds a proper error when the MDC slider is missing a thumb. Currently we eventually hit a runtime error which isn't easy to debug.

Fixes #24057.
---
 .../mdc-slider/slider.ts                      | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/material-experimental/mdc-slider/slider.ts b/src/material-experimental/mdc-slider/slider.ts
index 28a1c438e4f8..255811f62f9c 100644
--- a/src/material-experimental/mdc-slider/slider.ts
+++ b/src/material-experimental/mdc-slider/slider.ts
@@ -706,6 +706,7 @@ export class MatSlider
 
   ngAfterViewInit() {
     if (typeof ngDevMode === 'undefined' || ngDevMode) {
+      _validateThumbs(this._isRange(), this._getThumb(Thumb.START), this._getThumb(Thumb.END));
       _validateInputs(
         this._isRange(),
         this._getInputElement(Thumb.START),
@@ -1202,25 +1203,28 @@ class SliderAdapter implements MDCSliderAdapter {
   };
 }
 
-/**
- * Ensures that there is not an invalid configuration for the slider thumb inputs.
- */
+/** Ensures that there is not an invalid configuration for the slider thumb inputs. */
 function _validateInputs(
   isRange: boolean,
   startInputElement: HTMLInputElement,
   endInputElement: HTMLInputElement,
 ): void {
-  if (isRange) {
-    if (!startInputElement.hasAttribute('matSliderStartThumb')) {
-      _throwInvalidInputConfigurationError();
-    }
-    if (!endInputElement.hasAttribute('matSliderEndThumb')) {
-      _throwInvalidInputConfigurationError();
-    }
-  } else {
-    if (!endInputElement.hasAttribute('matSliderThumb')) {
-      _throwInvalidInputConfigurationError();
-    }
+  const startValid = !isRange || startInputElement.hasAttribute('matSliderStartThumb');
+  const endValid = endInputElement.hasAttribute(isRange ? 'matSliderEndThumb' : 'matSliderThumb');
+
+  if (!startValid || !endValid) {
+    _throwInvalidInputConfigurationError();
+  }
+}
+
+/** Validates that the slider has the correct set of thumbs. */
+function _validateThumbs(
+  isRange: boolean,
+  start: MatSliderVisualThumb | undefined,
+  end: MatSliderVisualThumb | undefined,
+): void {
+  if (!end && (!isRange || !start)) {
+    _throwInvalidInputConfigurationError();
   }
 }