如何创建HTML范围滑块并在Javascript中将其添加到变量类型中？

Question

我打算在每个标题和内容打印出来后显示一个范围滑块。但是，每当我尝试在我的javascript代码中添加范围滑块时，它都会显示为输入框，并且javascript不会将其识别为范围滑块html选项。在显示每个标题和内容后，如何显示范围滑块？我已经包含了我的代码部分，它允许使用HTML和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();