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

Question

我想使用 html 或 html5 创建一个显示十进制值（如 0.0 到 0.1）的滑块。

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>

Answer 2

听起来您想要一个输入字段，用户可以单击箭头以 0.1 的步长递增/递减值。如果是这种情况，您想使用 HTML5numeric input元素：

<input type="number" min="0" max="1" step="0.1" value="0.5" />

在HTML5 Goodies 中了解更多信息。

Answer 3

当您精确 HTML5 时，您可以使用新的输入类型 range ：

<input type="range" name="things" min="1" max="10">

示范

但请注意，它不适用于 IE9。