Question

我正在尝试滑动范围滑块以从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>

Answer 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>

Answer 2

＆＃13;

$(document).on("input change", "#rangeSlider" ,function() {

        var valNumb = parseInt($(this).val()-this.min);
        var newVal = valNumb/(this.max-this.min)*100;

        $(".rangeProgress").val(newVal);
  });

＆＃13;

<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>

＆＃13;

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

2 个答案: