I am building an angular app and I need to get values from an input type range and use them in a calculation and display the result.
I am getting the input range value to display on another part of the page but using it in a calculation is returning NaN, I have tried quite a number of ways but it’s returning the same thing. I don’t know what I’m doing wrong.
Pardon some errors in the code, it was in the process of finding a solution.
//The TS File
tbSelector!: number;
newTbSel:any = parseFloat("this.tbSelector");
fVal = (2.5 * this.newTbSel.toFixed(2)) ;
finalValue:number = (this.fVal);
//HTML File.
<div class="d-flex align-items-baseline">
<span class="TB-price">$</span>
<h2 id="TB-price" class="TB-price">
{{ +finalValue }}
</h2>
<span>/TB</span>
</div>
</div>
<div class="d-flex w-100 addone-tb-range justify-content-between">
<form>
<div class="slider align-items-center w-100 align-items-end">
<h2 class="pb-3 addon-range-label">CDN Bandwidth (TB)</h2>
<div class="range">
<input
type="range"
name="TB"
id="date1"
min="1"
max="100"
step="1"
value="1"
width="100%"
#tbSelector
(input)="(tbSelector.value)"
required
/>
<div
class="w-100 mb-3 pt-1 d-flex justify-content-between"
>
<span class="startTB">1</span>
<span class="endTB">100</span>
</div>
<span
class="setTB px-2 py-2 border border-success border-1 rounded"
style="color: #59a52c"
>{{ tbSelector.value }} TB</span
>
</div>
</div>
</form>
</div>
2
Answers
I found a way to solve the problem. I declared the input gotten directly from the input range as a number and initialized its value before using it in the calculation. This helps the value not to be seen as NaN.
HTML:
the problem is here
you are tring to parse a string as a float number so the result is NaN, also tbSelector.value is not possible if tbSelector is a number(in your definition) and not an object
I suggest to implement a simple template driven form in angular with an ngModel connected to your input, you can find more info here.
In your case
Final answer, hope it helps