具体化css-输入范围值弹出窗口

我想知道在滚动范围输入时如何显示范围值

<form action="#">
     <h5>The Temperature</h5>
     <!--the temperature-->
     <p class="range-field">
     <input type="range" id="temp" min="0" max="100" />
     </p>
</form>

温度

请尝试使用

input.value

这应该得到当前的输入元素值

<input type="range" min="5" max="10" step="1" oninput="showVal(this.value)" onchange="showVal(this.value)">

---

我一直在玩，这似乎没问题

<p class="range-field">
     <input type="range" id="test5" min="0" max="200" name="weight"/>
       <span class="thumb" style="left: 290.281px; height: 0px; width: 0px; top: 10px; margin-left: -6px;"><span class="value">100</span></span>
   </p>

在查看开发工具之后，我得到了span元素。 谢谢大家的帮助

window.onload = function() {
        var elems  = document.querySelectorAll("input[type=range]");
        M.Range.init(elems);
};

在页面加载中找到所有范围元素并初始化它们。

标签应包含在结束正文标签之前

---

在我的例子中，我使用的是VueJS，即使在正文末尾有script标记，thumb也无法在VueJS组件中工作。我在

mounted（）

中调用上述函数您好，欢迎使用SO。你真的缺少一个完整的问题，看看：。。其他材料也有关于这方面的文档，因此请向我们展示您的尝试。。这是一个副本。。关于你自己的问题，我已经尝试了我上面写的内容，范围是有效的，但不是弹出的值，我没有使用材料界面。顺便说一句，我刚得到答复。检查下面。滑动范围时，我想要的值应该显示在标记上

window.onload = function() {
        var elems  = document.querySelectorAll("input[type=range]");
        M.Range.init(elems);
};