HTML5 输入类型范围显示范围值

Question

我正在制作一个我想使用范围 slider 的网站(我知道它只支持 webkit 浏览器)。

我已经完全集成它并且工作正常。但我想使用 textbox 来显示当前的幻灯片值。

我的意思是如果最初 slider 的值为 5，那么在文本框中它应该显示为 5，当我滑动时文本框中的值应该改变。

我可以只使用 CSS 或 html 来做到这一点吗？我想避免使用 JQuery。可能吗？

Answer 1

对于那些仍在寻找没有单独的 javascript 代码的解决方案的人。如果不编写 javascript 或 jquery 函数，几乎没有简单的解决方案:

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

JsFiddle Demo

如果要在文本框中显示值，只需将输出更改为输入即可。

---

注意事项: 它仍然是在你的 html 中编写的 Javascript，我们可以在 js 中编写类似下面的内容来做类似的事情:

 document.registrationForm.ageInputId.oninput = function(){
    document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
 }

除了元素的id，也可以使用名称，现代浏览器都支持。