Materialize css- input range value popup

Question

I was wondering how to have the value of the range to show up when scrolling the range input

<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

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

On page load find all range elements and initialize them. <script> tag should be included immediately before the closing body tag.

In my case I'm using VueJS, and even with the script tag at the end of the body, the thumb won't work from within a VueJS component. I call the above function in mounted()