如何从范围滑块动态值计算输入值

how to calculate the input values from a range slider dynamic values .?

本文关键字：动态 计算 输入 范围      更新时间：2023-09-26

我在jquery中遇到了一些问题。。实际上我有离子范围滑块。。我正在从滑块中获取值。。现在我必须使用这些值，并使用if-else语句（5-7个条件）对其设置一些条件，并在另一个输入字段中显示它们。。但我没有得到所需的值。

例如，当范围滑块的值为0-100时，则速率为22，然后总量为速率*100。。。当值为101-500时，则费率为21$其显示费率，然后总额为费率*500，依此类推。

<div class="row ">
    <div class="col-md-4 price-details  ">
        <div>Number of Students </div>
        <input type="text" maxlength="4" value="0" id="rangeValue-p" readonly class="inp val-p js-from "/>
    </div>
    <div class="col-md-4 price-details">
        <div>Price per Student per Month  </div>
        <input type="text" maxlength="4" value="0" id="rvps" readonly class="inp rvps-p"/><span>$</span>
    </div>
    <div class="col-md-4 price-details">
        <div>Total Cost Per Month  </div>
         <input type="text" maxlength="4" value="0" id="totalAmount" readonly class="inp t-p"/><span>$</span>
    </div>
</div>

$("#rangeValue-p").on("change", function() {
    var rv_p =document.getElementById("rangeValue-p");
    var rate_p=0;
    var totalAmount_p=0;
    if (rv_p>=0 && rv_p<=100) {
      rate_p=22;
      $(".rvps-p").val(rate_p);
      totalAmount_p=rate_p*100;
      $(".t-p").val(totalAmount_p);
    }
    else if (rv_p>=101 && rv_p<=500) {
      rate_p=21;
      $(".rvps-p").val(rate_p);
      totalAmount_p=rate_p*500;
      $(".t-p").val(totalAmount_p);
    }
    else if (rv_p>=501 && rv_p<=1000) {
      rate_p=20;
      $(".rvps-p").val(rate_p);
      totalAmount_p=rate_p*1000;
      $(".t-p").val(totalAmount_p);
    }
    else if (rv_p>=1001 && rv_p<=1500) {
      rate_p=19;
      $(".rvps-p").val(rate_p);
      totalAmount_p=rate_p*1500;
      $(".t-p").val(totalAmount_p);
    }
    else if (rv_p>=1501 && rv_p<=2000) {
      rate_p=18;
      $(".rvps-p").val(rate_p);
      totalAmount_p=rate_p*2000;
      $(".t-p").val(totalAmount_p);
    }
    else if (rv_p>=2001 && rv_p<=2500) {
      rate_p=17;
      $(".rvps-p").val(rate_p);
      totalAmount_p=rate_p*2500;
      $(".t-p").val(totalAmount_p);
    }
    else if (rv_p>=2501 && rv_p<=3000) {
      rate_p=16;
      $(".rvps-p").val(rate_p);
      totalAmount_p=rate_p*3000;
      $(".t-p").val(totalAmount_p);
    }
    });

使用

var rv_p =document.getElementById("rangeValue-p").value;

而不是

var rv_p =document.getElementById("rangeValue-p");
相关文章：