范围输入和进度条问题与增量答案

【问题标题】：Range input and progress bar issue with increment范围输入和进度条问题与增量
【发布时间】：2017-08-28 07:22:32
【问题描述】：

我正在尝试使范围滑块滑动以填充 0-100 的进度元素但在范围滑块中，最小值和最大值的值不同。

所以它不能在简单的更改 jquery 代码中完成...

我无法弄清楚增加数字的方法，所以它会顺利工作，或者我的方法可能不是这样做的，请指教？

$(document).on("input change", "#rangeSlider" ,function() {

        var valNumb = parseInt($(this).val());
        
        var newVal = valNumb - 18;
        newVal = newVal++;

        $(".rangeProgress").val(newVal);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="range-slider" type="range" id="rangeSlider" name="range" value="18" min="18" max="99">

<progress class="rangeProgress" value="0" max="100"></progress>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您应该根据min 和max 属性做一些基本的数学计算：

$(document).on("input change", "#rangeSlider" ,function() {

        var valNumb = parseInt($(this).val()) - $(this).attr('min');
        var progress = valNumb / ($(this).attr('max') - $(this).attr('min')) * 100

        $(".rangeProgress").val(progress);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="range-slider" type="range" id="rangeSlider" name="range" value="18" min="18" max="99">

<progress class="rangeProgress" value="0" max="100"></progress>

【讨论】：

谢谢，你能用几句话解释一下计算是如何进行的吗？我在理解我需要计算的方式时遇到了一些麻烦......
工作，完美。谢谢。

【解决方案2】：

$(document).on("input change", "#rangeSlider" ,function() {

        var valNumb = parseInt($(this).val()-this.min);
        var newVal = valNumb/(this.max-this.min)*100;

        $(".rangeProgress").val(newVal);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="range-slider" type="range" id="rangeSlider" name="range" value="18" min="18" max="99">

<progress class="rangeProgress" value="0" max="100"></progress>

【讨论】：