如何使用 html 创建具有十进制值的滑块

Question

我想使用 html 或 html5 创建一个显示小数值的滑块，如 0.0 到 0.1。

原文由 user2656866 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加 step="0.1" 在您的输入范围标签中，如下所示： <input type="range" min="0.1" max="1.0" step="0.1" value="1"> 示例：

 document.getElementById("scale").oninput = function() {
  document.getElementById("spanscale").innerHTML = this.value;
}

 <input type="range" min="0.1" max="3.0" step="0.1" value="1" id="scale">Scale:<text id="spanscale" style="inline">1</text>

如果要在整数中显示小数位，可以在值输出中添加这段代码： Number(this.value).toFixed(1)

 document.getElementById("scale").oninput = function() {
  document.getElementById("spanscale").innerHTML = Number(this.value).toFixed(1);
}

 <input type="range" min="0.1" max="3.0" step="0.1" value="1.0" id="scale">Scale:<text id="spanscale" style="inline">1.0</text>

原文由 L777 发布，翻译遵循 CC BY-SA 4.0 许可协议