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

Question

我正在制作一个我想使用范围滑块的网站（我知道它只支持 webkit 浏览器）。

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

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

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

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

Answer 1

这使用javascript，而不是直接使用jquery。它可能会帮助您入门。

 function updateTextInput(val) {
          document.getElementById('textInput').value=val;
        }

 <input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">

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

Answer 2

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

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

JsFiddle 演示

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

---

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

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

除了元素的 id，也可以使用 name，现代浏览器都支持这两者。

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