How can I create an HTML range slider and add it within a variable type in Javascript?

Question

I am trying to display a range slider after every title and content is printed out. However, whenever I try to add the range slider in my javascript code, it gets displayed as an input box and javascript does not recognize it as a range slider html option. What can I do to display the range slider after every title and content is displayed? I've included the parts of my code that allows the list to be posted using HTML and Javascript.

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

    -->

</ul>



    function getPosts(){
        var query = new Parse.Query(Post);
        query.find({
          success: function(results){
              var output = "";
              var content = "";
              for(var i in results){
                var title = results[i].get("title");
                var content = results[i].get("content");
                //var range = [Range(0f, 100f)];

                //console.log("Title:"+title);
                output += "<li>";
                output += "<h3>MAC Address: "+title+"</h3>";
                output += "<p>Location: "+content+"</p>";


                output += "</li>";

                output += "<input type=range/>";  //This is the part that isn't recognized and is displayed as just an input type and not the HTML type of range slider

              }
              $("#list-posts").html(output);  


          }, error: function(error){
              console.log("Query Error:"+error.message);
          }
      });
    }

    getPosts();