可变输出 - Html5 范围滑块

Question

我想让范围滑块进行不同的计算。例如，当我将滑块拖动到 50 时，它在 (0.10*this.value) , dragged to 100 it needs to be (0.08*this.value) , 200 to (0.07*this.value) 处进行计算，等等。这可能吗？

<input type="range" name="grade" orient="vertical min="0" max="1000" value="0" step="50" onchange="showValue(0.10*this.value) ">
    <p><span id="range">0</span>
    x 10 kg Bags of ice suggested</p>
    <script type="text/javascript">
    function showValue(newValue)
    {
        Math.round(7.000000000000001)
        document.getElementById("range").innerHTML=Math.round(newValue);
    }
    </script>

Answer 1

<input type="range" name="grade" orient="vertical min="0" max="1000" value="0" step="50" onchange="showValue(this.value) ">

然后您可以在函数 showValue() 中使用开关：

function showValue(_value) {
  switch(value) {
    case 100:
      //DO STG
      break;
 }
}

可变输出 - Html5 范围滑块

Variable outputs - Html5 range slider

html

slider

range