スライドバー

スライドバーで数値を入力するには、input要素のtypeにrangeを指定します。
minで最低値、maxで最高値、stepで上下する最小単位、valueでデフォルト値を指定します。
執筆時点ではChromeのバージョン７以降、Operaの９以降、及びＳａｒａｆｉの５以降でないと正常に動作しないようです。

---

50

---

<input type="range" name="num" min="0" max="100" step="5" value="50"
 onchange="changeValue(this.value)">
<span id="val">50</span>
<script type="text/javascript">
function changeValue(value) {
    document.getElementById("val").innerHTML = value;
}
</script>