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