mat-slider - Angular Material experimental - _getHostElement error. How to resolve?

Question

I have recently upgraded to Angular 12 and installed Angular Material Experimental in order to try out the new mat-slider. I effectively want a range slider, which is not available in the current angular material package, and I'd prefer to stay within the Angular Material ecosystem.

From the following discussion is why I decided to try the new mat-slider in material experimental https://github.com/angular/components/issues/1331

Code:

Module:

import { MatSliderModule } from '@angular/material-experimental/mdc-slider'; with the appropriate imports etc

HTML: <mat-slider discrete markers thumbLabel [min]="0" [max]="100" [step]="5" values="[10,20]"></mat-slider>

GUI: I get the following visual - just a back bar for the slider img

Error: And the console error:

main.js:1 ERROR TypeError: Cannot read property '_getHostElement' of undefined
    at me.value (main.js:1)
    at Object.Lt.setThumbStyleProperty (main.js:1)
    at main.js:1
    at main.js:1
    at ae.<computed> (polyfills.js:1)
    at X.invokeTask (polyfills.js:1)
    at Object.onInvokeTask (main.js:1)
    at X.invokeTask (polyfills.js:1)
    at X.runTask (polyfills.js:1)
    at X.invokeTask (polyfills.js:1)

Normal Angular Material mat-sliders are not an issue to get working.

Is there something obvious that I am missing to get the _getHostElement error? Maybe another module to import? I can't seem to find anything related to this error for Mat-Slider in experimental.

Answer 1

I ran into the same problem. Apparently they have updated the code since you asked this question, because they now give you a hint in the console:

   Valid configurations are as follows:
    <mat-slider>
      <input matSliderStartThumb>
      <input matSliderEndThumb>
    </mat-slider>