See input range value as it changes with Angular 2

Question

Yes, this will be a noob question, because I'm a complete noob in Angular 2.

I'm trying to pass the value of a range to my component, I already figured out how. But now, I think that would be nice to see the value during the change and not while the change is made. I hope you understand what I'm trying to explain.

in app.component.html

<form action="#">
    <input type="text" placeholder="Time"><br>
    ram: {{ selectedRam }}
    <input #ramSelector name="ram" type="range" min="0" max="{{ ramMaxValue }}" (change)="setRam(ramSelector.value)" value="0">
</form>

in app.component.ts

setRam(value){
    this.selectedRam = value;
    console.log(this.selectedRam);
}

I found there is this "oninput" method, but didn't work.

Thansk in advance!

Answer 1

Using input seems to work for me

<input type="range" min="0" max="100" #ranger (input)="yourMethod(ranger.value)">

Answer 2

try using ng model like below :

<form action="#">
<input type="text" placeholder="Time"><br>
ram: {{ selectedRam }}
<input #ramSelector name="ram" type="range" min="0" max="{{ ramMaxValue }}" [(ngModel)]="mymodel" (ngModelChange)="setRam($event)" value="0">

Answer 3

You can simply use the input event like so:

<label for="time">Time ({{ time.value }})</label>
<input type="range" #time (input)="time.value" id="time" min="0" max="100">

This will show you the range value as you change it.

Answer 4

On angular 5:

<input type="range" min="0" [attr.max]="myMax" [value]="myValue" (input)="doSomething()">

Works for me!!

(Not enough reputation to comment that it still works on angular 5)

Answer 5

Hope this will help you. This code works for me in angular.

getRange= (value) => {
    document.getElementById('rangeValue').innerHTML = value;
  }

<div style="display: none;" class="openSlider">
                  <label style="background-color: white;
                  margin-left: 116px;
                  display: flex;
                  width: 25px;" id="rangeValue">0</label>
                  <input style="
                    margin-left: 115px;
                    margin-top: 13px;" type="range" min="1" max="100" value="50" class="slider" #range
                    (change)="getRange(range.value)">
                </div>