如何为显示的每个范围滑块显示范围滑块的范围值。

时间:2015-11-16 22:23:29

标签: javascript html rangeslider

我正在尝试为for循环打印出的每个范围滑块显示范围滑块值,但是,不显示范围滑块值。有谁知道我做错了什么?

包含使用HTML和Javascript显示范围滑块的代码部分。

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

1 个答案:

答案 0 :(得分:0)

您可以使用此代码显示范围滑块的值。这是一个示例,因此,请根据需要进行编辑。

 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>