I have an angular project where i got additional javascript loaded included in the angular.json file under de scripts section. in this js file are a bunch of event listeners in particular this one:

document.getElementById("volume").addEventListener("input", volChangeFunc, false)

The problem i am having is that i'm using mat-slider like this:

<mat-slider id="volume" thumbLabel color="primary"></mat-slider>

and it seems that the js doesn't detect the mat-slider element with document.getElementById("volume"). If i use the classic input type="range" everything works fine.

How can i make it so mat-slider also works? I hope someone can help me with this issue. (PS: i also tried binding the mat-slider to a hidden input range field but i ran into issues with triggering the event this way as well. but definitely a usable option if needed)