skip to Main Content

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


  1. Chosen as BEST ANSWER

    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.

        tbSelector: number = 0;
         finalValue:number = 0;
           cost: number = 2.5;
          taxRate: number = 0;
            tax: number = 0.00;
              subtotal: number = 0;
           total: number = 0;
    
            onRangeChange(event: Event) {
             let range: HTMLInputElement = <HTMLInputElement>event.target;
            this.tbSelector = Number(range.value);
           this.subtotal = Number(range.value) * this.cost;
           this.tax = this.subtotal * (this.taxRate / 100);
          this.total = this.subtotal * (1 + (this.taxRate / 100));
          this.finalValue = this.total;
             }
    

    HTML:

        <input
                        type="range"
                        name="TB"
                        id="date1"
                        min="1"
                        max="100"
                        step="1"
                        value="1"
                        width="100%"
                        #tbSelector
                        (input)="onRangeChange($event)"
                        required
                      />
    
                 <h4 id="TB-price-sidebar">$ {{ finalValue }}</h4>
    

  2. the problem is here

    newTbSel:any = parseFloat("this.tbSelector");
    

    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

    import {Component} from '@angular/core';
    
    @Component({
      selector: 'example-app',
      template: `
        <input type="number" [(ngModel)]="tbSelector" required>
    
        <p>Value: {{ tbSelector }}</p>
      `,
    })
    export class SimpleNgModelComp {
      tbSelector: number = 1;
    } 
    

    Final answer, hope it helps

    import {Component} from '@angular/core';
    
    @Component({
      selector: 'example-app',
      template: `
        <input type="number" [(ngModel)]="tbSelector" (ngModelChange)="calculate($event)" required>
    
        <p>Value: {{ tbSelector }}</p>
      `,
    })
    export class SimpleNgModelComp {
        tbSelector: number = 0;
        finalValue: number; 
    
        calculate(value: number){
            this.finalValue = 2.5 * value;
        }
    } 
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search