input type="range"をつかってスライダーUIをつくる

<input type="range" value="0" min="0" max="100" step="1" />

見た目はブラウザに依存しますが、これだけで簡単にUIがつくれます。

value属性で初期値、
min属性で最低値、
max属性で最大値、
step属性でステップ数を設定できます。

イベントも簡単に貼ることができて非常に便利な存在です。

JavaScript

var slider = doc.querySelector("[type=range]");
    
slider.addEventListener("input", function() {
    // ドラッグ中のイベント
}, false);

slider.addEventListener("change", function() {
    // マウスアップした際のイベント
}, false);

DEMO