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.

I gave up on angular experimental - and went with the range slider in Angular Material extensions library (as suggested via the linked page at the top). Perhaps there will be some documentation when the experimental libraries come of age. — crisco, Dec 11 '21 at 09:23

score 1 · Answer 1 · edited Jan 26 '22 at 11:07

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>

edited Jan 26 '22 at 11:07

Dharman

30,962
25
85
135

answered Jan 26 '22 at 11:01

travisDerAffe

11
1

score 0 · Answer 2 · answered Nov 25 '22 at 01:52

You should probably use a dual range slider CSS customizatión since Angular material presents sometimes problems, try this:

HTML

<div class="range_container">
    <div class="sliders_control">
        <input id="fromSlider" type="range" value="10" min="0" max="100"/>
        <input id="toSlider" type="range" value="40" min="0" max="100"/>
    </div>
    <div class="form_control">
        <div class="form_control_container">
            <div class="form_control_container__time">Min</div>
            <input class="form_control_container__time__input" type="number" id="fromInput" value="10" min="0" max="100"/>
        </div>
        <div class="form_control_container">
            <div class="form_control_container__time">Max</div>
            <input class="form_control_container__time__input" type="number" id="toInput" value="40" min="0" max="100"/>
        </div>
    </div>
</div>

CSS:

    .range_container {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 35% auto;
}

.sliders_control {
  position: relative;
  min-height: 50px;
}

.form_control {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  color: #635a5a;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #C6C6C6;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #C6C6C6;
  cursor: pointer;  
}

input[type=range]::-webkit-slider-thumb:hover {
  background: #f7f7f7;
}

input[type=range]::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
  -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}

input[type="number"] {
  color: #8a8383;
  width: 50px;
  height: 30px;
  font-size: 20px;
  border: none;
}


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

input[type="range"] {
  -webkit-appearance: none; 
  appearance: none;
  height: 2px;
  width: 100%;
  position: absolute;
  background-color: #C6C6C6;
  pointer-events: none;
}

#fromSlider {
  height: 0;
  z-index: 1;
}

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

2 Answers2