ラジオボタンでスライドバーっぽいものを作る

　　※Markdownモードに変えて書き直してみた。
　　　実行できるようにしたかったんだけど、まだできてない。
　　　実行しないでコード表示になってしまう。謎。(;´д｀)

iPadで動くようにして、と言われたんだけど、スライドバーがiPadで使い物にならなかったので、ラジオボタンでそれっぽく作ってみました。

<style>
    /*--------------------------
       スライドバー用
   --------------------------*/
    /* クリックされていない目盛りの形状 */
    .slidebar label
    {
        display: block;
        cursor: pointer;
        width: 8px;
        height: 10px;
        line-height: 1;
        transition: .2s;
        border-style: solid;
        border-width: 1px;
        border-color: #888888;
        margin-top: 8px;
    }
    /* クリックされた目盛りの形状 */
    .slidebar input[type="radio"]:checked + .slide_curr
    {
        margin-top: 0px;
        height: 16px;
    }
    /* 目盛りを横に並べる */
    .slidebar span
    {
        margin: 1px;
        float: left;
    }
    /* ラジオボタンを非表示にする */
    .slidebar input
    {
        display: none;
    }
</style>

<div class="slidebar" id="id_slidebar" style="overflow:hidden;">
    <!-- ここにスライドバーを作成 -->
</div>

<script>
    function make_slidebar()
    {
        //スライドバーを作成
        const id_str = "id_bar";
        const nm_str = "nm_bar";
        var html = "";
        for(let i = 0; i <= 10; i++)
        {
            html += '<span>';
            html += '<input type="radio" name="' + nm_str + '" value="' + i + '" id="' + id_str + i + '">';
            html += '<label for="' + id_str + i + '" class="slide_curr"' + 
                            ' style="background-color:rgba(255, 0, 0, ' + (i * 0.1) + ');"></label>';
            html += '</span>';
        }
        //セットする
        id_slidebar.innerHTML = html;
    }
</script>