get value of slider in typescript

Issue

I was trying to get the value of a slider in typescript as following:

My html:

<input id="width" type="range" value="250" min="50" max="500" (change)="getSliderValue()" />

my typescript code in my component.ts:

getSliderValue() {
var slider = document.querySelector("#width");
slider.addEventListener('change', () => {
      var data = slider.value
});
}

however with this, i get following error on slider.value:

Property 'value' does not exist on type 'Element'

What am I doing wrong?

Solution

I explained pretty much everything in the comments, here is the code:

Html:

<input id="width" type="range" value="250" min="50" max="500" (change)="getSliderValue($event)" (oninput)="getSliderValue($event)"  />

component.ts:

getSliderValue(event) {
   console.log(event.target.value);
}

You can read this article or this question for a better understanding of the onchange and oninput events.

Answered By - Cristian Traìna