[script.aculo.us]スライダーバー

<div id="slider_back" class="slider_back">
<div id="slider_top" class="slider_top">0</div>
</div>
<script type="text/javascript">
<!--
new Control.Slider('slider_top', 'slider_back', {
        axis: 'Horizontal', // スライダーの配置方向
        values: $R(0, 100), // 取ることのできる値の範囲
        onChange: function(value) { // 値を変更した時にコールバック
        document.getElementById('slider_top').innerHTML = value;
        },
        onSlide: function(value) { // バーをドラッグしている時にコールバック
        document.getElementById('slider_top').innerHTML = value;
        }
});
-->
</script>

div.slider_top {
        position: relative;
        top: -10px;
        width: 20px;
        height: 25px;
        background-color: #aaaaff;
        text-align: center;
        vertical-align: baseline;
}

div.slider_back {
        position: absolute;
        top: 250px;
        width: 200px;
        height: 5px;
        background-color: #6666aa;
}