How to get the value of a range slider?

Question

Can you please help me how to get values of a range slider in javascript?

<script>
    $(function()
    {
        $('.slider').on('input change', function(){
            $(this).next($('.slider_label')).html(this.value);
        });
        $('.slider_label').each(function(){
            var value = $(this).prev().attr('value');
            $(this).html(value);
        });


    })
</script>

 <p><label for="range_size">Size: </label> <input type="range" name="size"  class="slider" min="1" max="75" value="45">
                    <span  class="slider_label"></span></p>

                <p><label for="range_width">Width: </label> <input type="range" name="width" class="slider" min="1" max="6" value="1">
                    <span  class="slider_label"></span></p>

I am trying to get like this :

 <script type="text/javascript">
                    function calculate () {
                        var size = document.getElementById ("size").value;

alert(size);


</script>

But it doesn't show any alert. Can you please help me?

Answer 1

Using value does work :

 let p = document.getElementById("val") let range = document.getElementById("slide") let changeVal = () => { p.textContent = range.value } changeVal() range.onchange = changeVal 

 <input id="slide" type="range" min="0" max="100"/><p id="val"></p> 

as B001ᛦ said in comment the problem is you forgot to add an id on your <input>

---

If you prefer you can also use name s but you need to take care as name can be reused while Ids are unique

 let p = document.getElementsByName("val")[0] let range = document.getElementsByName("slide")[0] let changeVal = () => { p.textContent = range.value } changeVal() range.onchange = changeVal 

 <input name="slide" type="range" min="0" max="100"/><p name="val"></p> 

getElementsByName return a NodeList so you'll need to get the node you need from this list (the first one if you have only one)

---

as a side note value does exists on every input type