Search code examples
htmlangulartypescriptrangeslider

HTML5 type="range" this.value returns undefined


I'm trying to make a range input, but when I try to pass it to my function, it returns undefined:

HTML:

<div class="slidecontainer">
    <label>Setpoint</label>
    <p>{{channel.setPoint}}</p>
    <div>
         <p>5</p>
         <p>30</p>
    </div>
    <input type="range" min="5" max="30" value="50"  step="0.5" class="slider"
        [(ngModel)]="channel.setPoint" (onchange)= "putSetpoint(channel, this.value)">
    <br>
</div>

TS file:

putSetpoint(cb: Channel, value: number) {
    console.log(value);
    cb.setpoint = value;
    this.homedata.setpointChannel(cb);
}

Solution

  • this.value does not refer to anything , you have to tell Angular that you are referring to the value of the input :

     <input #inputRange type="range" min="5" max="30" value="50"  step="0.5" class="slider"
            [(ngModel)]="channel.setPoint" (onchange)= "putSetpoint(channel, inputRange.value)">