Materialise css- 输入范围值弹出窗口

Question

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

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

Answer 1

请尝试使用 input.value 这应该得到当前输入元素值。

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

Answer 2

我一直在尝试，这似乎没有问题

<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>

并且通过这样做找到范围输入的值

var weight = $('input[name=weight]').val();

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

Answer 3

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

在页面加载时找到所有范围元素并初始化它们。 <script> 标签应紧接在结束正文标签之前。

在我的例子中，我使用的是 VueJS，即使主体末尾有脚本标记，拇指也无法在 VueJS 组件中工作。我在mounted()

中调用上面的函数

Materialise css- 输入范围值弹出窗口

Materialize css- input range value popup

css

materialize

web