如何使用html创建带小数值的滑块

Question

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

Answer 1

听起来你想要一个输入字段，用户可以点击箭头以0.1为单位递增/递减一个值。如果是这种情况，您希望使用HTML5 numeric input元素：

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

在HTML5 Goodies了解详情。

Answer 2

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

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

Demonstration

但请注意it doesn't work on IE9-。

Answer 3

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

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.0" id="scale">Scale:<text id="spanscale" style="inline">1.0</text>