0

I am trying to get the range slider value to be displayed for every range slider printed out by the for loop, however, the range slider value is not being displayed. Does anyone know what I am doing wrong?

The part of my code that displays the range slider using HTML and Javascript are included. 

    <center id="list-posts">
      <!--
          list of posts 
          <li>
              <H3>Title
              <p>Content

      -->

</center>


<script type="text/javascript">

 function getPosts(){
        var query = new Parse.Query(Post);
        query.find({
          success: function(results){
              var output = "";
              for(var i in results){
                var title = results[i].get("title");
                var content = results[i].get("content");
                var change = remove.html;

                output += '<li>';
                output += '<h3><font face="verdana"><strong>MAC Address: </strong>'+title+'</h3>';

                output += '<p><font face="verdana"><strong>Location: </strong>'+content+'</p>';
                output += '<p></p>';
                output += "<p><div class='row'><div class='large-4'>";
                output += "<input type='range' id='rangeInput' name='rangeInput' min='0' max='100' step='25' value='100' oninput='amount.value=rangeInput.value'></input>";
               output += "<output id='amount' name='amount' for='rangeInput'>100</output>";     //this is the part used to output value of range slider. When I try it by itself, it works, but when this is put in within Javascript, it does not work. What am I doing incorrectly?

               output += "</div></div></p>";

                output += '</li>';

              }
              $("#list-posts").html(output);
          }, error: function(error){
              console.log("Query Error:"+error.message);
          }
      });
    }

    getPosts();
Nilim
  • 65
  • 1
  • 6
  • You might find you get better help with a jsFiddle set up for people. I started one for you at http://jsfiddle.net/yd316xxm/ but of course it's missing stuff. Also, while I can't run your example due to stuff missing, it does look like you are creating multiple elements with the same ID, which won't work well (rangeInput). You might want to name them "rangeInput" + c where c increments by 1 each loop. – Ed Bayiates Nov 17 '15 at 03:21
  • 1
    Thank you for your help. I'll try what you have suggested. – Nilim Nov 17 '15 at 05:45

1 Answers1

0

You can use this code to display the value of the range slider. This is an example and so, please edit for your need.

 function range() {
      var x = document.getElementById("myRange").value;
      document.getElementById("demo").innerHTML = x;
    }
<input type="range" id="myRange" value="90" onchange="range()">

    <p id="demo"></p>
Adarsh M
  • 36
  • 5