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>

Hi welcome to SO. You're really lacking in a complete question here, take a look at : http://stackoverflow.com/help/how-to-ask .. Ther materialUI has documentation on this also so please show us what you have tried .. http://materializecss.com/ — Pogrindis, Dec 10 '15 at 11:52
And this is a duplicate.. Of your own question http://stackoverflow.com/questions/34195967/materialize-css-input-range — Pogrindis, Dec 10 '15 at 11:53
I have tried what I have written above and the range is working BUT NOT the value that pops up and I aint using MATERIAL UI. I just got answered by the way. Check below. — Tevin Thuku, Dec 10 '15 at 12:23

score 4 · Answer 1 · answered Dec 16 '18 at 00:27

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

Koby Douek · Accepted Answer · 2015-12-10T11:56:10.930

3

Please try using input.value This should get the current input element value.

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

edited Dec 10 '15 at 11:56

answered Dec 10 '15 at 11:50

Koby Douek

16,156
19
74
103

The value I want should appear on the markup, when sliding the range – Tevin Thuku Dec 10 '15 at 11:54

score 1 · Answer 3 · answered Dec 10 '15 at 16:20

I have been toying around and this seems to work with no problem

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

And the value of the range input is found by doing this

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

I got the span element after looking at the dev tools. Thanks everyone for the help.

Materialize css- input range value popup

3 Answers3