html-5范围滑块最大值和最小值

Question

我正在使用html-5滑块

      <input type="range" .. />

我想把滑块的min和max值分别放在它的左边和右边。我该怎么做呢？

Answer 1

试一试

<input type="range" min="20" max="80" />

还可以将以下属性应用于input type="range"

• max -指定最大值allowed
• min -指定最小值allowed
• step -指定合法数字intervals
• value -指定默认值

Answer 2

如果您想在其左侧和右侧显示min和max值，只需在此处打印：

10 <input type="range" min="10" max="20" /> 20

你也可以使用css，尽管它没有得到广泛的支持。

input[type="range"]:before {
    content: attr(min) " ";
}
input[type="range"]:after {
    content: " " attr(max);
}