{"record":{"id":"c972f216d65b6bfa","repo":"angular/components","slug":"invalid-slider-thumb-input-configuration-vali","errorCode":null,"errorMessage":"Invalid slider thumb input configuration!\n\n   Valid configurations are as follows:\n\n     <mat-slider>\n       <input matSliderThumb>\n     </mat-slider>\n\n     or\n\n     <mat-slider>\n       <input matSliderStartThumb>\n       <input matSliderEndThumb>\n     </mat-slider>\n   ","messagePattern":"Invalid slider thumb input configuration!\n\n   Valid configurations are as follows:\n\n     <mat-slider>\n       <input matSliderThumb>\n     </mat-slider>\n\n     or\n\n     <mat-slider>\n       <input matSliderStartThumb>\n       <input matSliderEndThumb>\n     </mat-slider>\n   ","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/material/slider/slider.ts","lineNumber":966,"sourceCode":"/** Ensures that there is not an invalid configuration for the slider thumb inputs. */\nfunction _validateInputs(\n  isRange: boolean,\n  endInputElement: _MatSliderThumb | _MatSliderRangeThumb | undefined,\n  startInputElement: _MatSliderThumb | undefined,\n): void {\n  const startValid =\n    !isRange || startInputElement?._hostElement.hasAttribute('matSliderStartThumb');\n  const endValid = endInputElement?._hostElement.hasAttribute(\n    isRange ? 'matSliderEndThumb' : 'matSliderThumb',\n  );\n\n  if (!startValid || !endValid) {\n    _throwInvalidInputConfigurationError();\n  }\n}\n\nfunction _throwInvalidInputConfigurationError(): void {\n  throw Error(`Invalid slider thumb input configuration!\n\n   Valid configurations are as follows:\n\n     <mat-slider>\n       <input matSliderThumb>\n     </mat-slider>\n\n     or\n\n     <mat-slider>\n       <input matSliderStartThumb>\n       <input matSliderEndThumb>\n     </mat-slider>\n   `);\n}\n","sourceCodeStart":948,"sourceCodeEnd":982,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/slider/slider.ts#L948-L982","documentation":"MatSlider requires exactly one thumb input (`matSliderThumb`) or exactly two (`matSliderStartThumb` + `matSliderEndThumb`) for a range slider. `_validateInputConfiguration` checks start/end validity and throws this error for any other combination. It enforces the declarative contract of the slider's inner inputs.","triggerScenarios":"`<input matSliderStartThumb>` without an end thumb; two `matSliderThumb` inputs inside one slider; mixing `matSliderThumb` with `matSliderStartThumb`; an end thumb without a start thumb.","commonSituations":"Migrating from the old single-input mat-slider API and leaving stale inputs; partially converting a single slider to a range slider by adding only a start thumb; copy-paste duplicating a thumb input.","solutions":["For a single-value slider use exactly one `<input matSliderThumb>`.","For a range slider pair `matSliderStartThumb` and `matSliderEndThumb` — one of each, nothing else.","Remove any leftover/duplicate thumb inputs from the slider template.","After fixing, re-check that each input has a distinct ngModel/form-control binding."],"exampleFix":"// before\n<mat-slider>\n  <input matSliderStartThumb>\n</mat-slider>\n// after\n<mat-slider>\n  <input matSliderStartThumb [(ngModel)]=\"min\">\n  <input matSliderEndThumb [(ngModel)]=\"max\">\n</mat-slider>","handlingStrategy":"validation","validationCode":"const thumbs = sliderEl.querySelectorAll(\n  '[matSliderThumb],[matSliderStartThumb],[matSliderEndThumb]');\nconst start = sliderEl.querySelectorAll('[matSliderStartThumb]').length;\nconst end = sliderEl.querySelectorAll('[matSliderEndThumb]').length;\nconst plain = sliderEl.querySelectorAll('[matSliderThumb]').length;\nconst valid = (plain === 1) || (plain === 0 && start === 1 && end === 1);\nif (!valid) throw new Error('Invalid slider thumb configuration');","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Use exactly one matSliderThumb, or exactly one start + one end input.","Never mix matSliderThumb with matSliderStart/EndThumb in the same slider.","Bind each thumb input to its own distinct form control."],"tags":["angular","material","template","configuration"],"backgroundTag":"invalid-component-configuration","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}