get value of slider in typescript

Question

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?

There are so many wrong things that I don't know where to start. I'd advise you to take an Angular tutorial, first thing — Christian Vincenzo Traina, Nov 21 '19 at 08:58
That sounds great haha... isn't there a simple short way for this problem? I only need typescript for this one thing and this would pretty much solve everything @CristianTraìna — J.Doe, Nov 21 '19 at 09:02
Your application is an Angular application (even if you didn't mention it), so you don't need TypeScript for **this**, you need TypeScript for **everything**. The `(change)` keyword in the template is an event bind, so you don't need `addEventListener` since it will do the same thing. You're literally attaching a new event listener for every slide — Christian Vincenzo Traina, Nov 21 '19 at 09:03
yes that i know, the rest is in typescript too that's why i am looking for a typescript instead of JavaScript solution if there is any... I meant that getting the slider value would pretty much solve all of my problems @CristianTraìna — J.Doe, Nov 21 '19 at 09:05
You don't need to query the dom with `querySelector` this is a bad practice in Angular. You have several ways to get a reference to the element, for example you can pass an `$event` parameter. And, in the end, don't use `var` — Christian Vincenzo Traina, Nov 21 '19 at 09:06

Christian Vincenzo Traina · Accepted Answer · 2019-11-21T09:43:43.830

2

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.

edited Nov 21 '19 at 09:43

answered Nov 21 '19 at 09:08

Christian Vincenzo Traina

9,546
2
40
63

check this solution with FF(firefox) This is not working for all the browsers. please check again with all the browsers. – Damodhar Nov 21 '19 at 09:26
@Damodhar I don't see anything wrong with Firefox, do you? Feel free to update my answer in case – Christian Vincenzo Traina Nov 21 '19 at 09:35
Also possible to get the number as number directly using the `valueAsNumber` property instead of plain `value` – Daniel Netzer May 13 '20 at 06:31

score 0 · Answer 2 · answered Mar 10 '22 at 17:34

I'm follow Cristian and add ngModel binding to label show data

<label for="state">My range: <b> {{myValue}}%</b></label>
      <input  name="state" type="range" [(ngModel)]="myValue" (change)="getSliderValue($event)" (oninput)="getSliderValue($event)" id="formControlRange" value="0" min="0"  max="100"   />

and component.ts

myValue: any=0     
getSliderValue(event:any=0) {
    this.myValue = event.target.value
    console.log(this.myValue );
 }

score -1 · Answer 3 · answered Nov 21 '19 at 09:06

you need to add oninput event as well for listing the slider value change event.

HTML

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

JS

<script>
function getSliderValue(value) {
      console.log(value);
}
</script>

get value of slider in typescript

3 Answers3