HTML5 Forms の UI をどう実装したらよいか悩んでいます

js HTML5

HTML5 で新しく定義された <input type="range"> 等を JavaScript で実装しようとしたときに、元の input 要素と UI 要素を関連付けする方法で悩んでいます。

<input type="range"
       id="hogeid"
       class="hogeclass"
       value="50"
       min="0"
       max="100"
       onchcange="onchange(this)" />

といった要素があったときに、 div要素 と input type="hidden" に置換して、元の input type="range" 要素から引き継げる属性値を引き継いでしまえば良いんじゃないか? と

つまり、こんな感じにしてしまえばいいのかなと。

<div id="hogeid-ui"                ← 元のID + "-ui" で自動生成
     class="hogeclass-ui slider"   ← 元のCLASS + "-ui" で自動生成
     data-uuui="slider">           ← 付与
    <div class="slidergrip" />     ← スライダーコントロールのグリップ部分
</div>
<input type="hidden"               ← input type="range" を置換する要素
       id="hogeid"                 ← 元のID を引き継ぐ
       class=""                    ← 元のCLASS を引き継ぐ
       data-uuui="slider"          ← 判別用に付与
       style="display: none"       ← 付与(念のため)
       value="50"                  ← 元の属性値 を引き継ぐ
       min="0"                     ← 元の属性値 を引き継ぐ
       max="100"                   ← 元の属性値 を引き継ぐ
       onchange="" />              ← 元の属性値 は引き継がない

めんどくさいのがイベントハンドラの扱いです。
特に DOM Lv0 だと onchange="onchange(this)" のように this がありうるので、どうしたもんかなと。