script.aculo.us ライブラリの slider.js による横方向のスライダーにおいて、値の範囲、初期値、ハンドル移動時の値を指定する方法。最初は、初期値で設定した場所に、スライダーのハンドルを表示。スライダーのハンドルをドラッグし左右に動かすと、設定した範囲内で、なおかつ、あらかじめ設定しておいた移動時の値を、動的に表示し、最終的には、移動後の位置の値を表示する。
スライダーの値は、設定した範囲を超えることはない。さらに、あらかじめ設定したハンドル移動時の値以外の値にもならない。
実装例
値：0
実装例の動作について
スライダーの値の範囲は、-100～100 を指定してあり、初期設定値は、0 を指定してあるので、スライダーのハンドルは、トラックの中心にある。スライダーのハンドルを移動した時の値は、-100、-75、-50、-25、0、25、50、75、100 の9つの数字を指定してあるので、これらの数字以外にはならない。
スライダーのハンドル（黒い部分）をドラッグし左右に動かすと、スライダー下の「値：0」の数字が変化する。スライダーのハンドルを左端に動かすと「値：-100」になる。スライダーのハンドルを右端に動かすと「値：100」になる。その間は、-100、-75、-50、-25、0、25、50、75、100 の9つの数字のいづれかになる。
スライダーのトラック部分（グレーの部分）をクリックすると、瞬時に、その位置へハンドルが動く。
ソースコード
JavaScript
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous/slider.js"></script>
<script type="text/javascript">
<!--
window . onload = function () {
new Control . Slider( 'slider-handle', 'slider-track', {
range: $R( -100, 100),
values: [ -100, -75, -50, -25, 0, 25, 50, 75, 100 ],
sliderValue: '0',
onSlide: function( value ) { $( 'slider-value' ) . innerHTML = value },
onChange: function( value ) { $( 'slider-value' ) . innerHTML = value }
} );
}
// -->
</script>
<script type="text/javascript" src="scriptaculous/slider.js"></script>
<script type="text/javascript">
<!--
window . onload = function () {
new Control . Slider( 'slider-handle', 'slider-track', {
range: $R( -100, 100),
values: [ -100, -75, -50, -25, 0, 25, 50, 75, 100 ],
sliderValue: '0',
onSlide: function( value ) { $( 'slider-value' ) . innerHTML = value },
onChange: function( value ) { $( 'slider-value' ) . innerHTML = value }
} );
}
// -->
</script>
CSS
<style type="text/css">
<!--
#slider-track {
background-color: gainsboro;
width: 100px;
height: 20px;
border-radius: 10px;
border: 1px gray solid;
}
#slider-track:hover {
background-color: lightgray;
}
#slider-handle {
background-color:#333333;
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
}
#slider-handle:hover {
background-color: black;
}
-->
</style>
<!--
#slider-track {
background-color: gainsboro;
width: 100px;
height: 20px;
border-radius: 10px;
border: 1px gray solid;
}
#slider-track:hover {
background-color: lightgray;
}
#slider-handle {
background-color:#333333;
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
}
#slider-handle:hover {
background-color: black;
}
-->
</style>
HTML
<div id="slider-track">
<div id="slider-handle"></div>
</div>
<div>値：<span id="slider-value">0</span></div>
<div id="slider-handle"></div>
</div>
<div>値：<span id="slider-value">0</span></div>
要点解説
JavaScript
<script type="text/javascript" src="prototype.js"></script>
prototype.js を読み込む。
<script type="text/javascript" src="scriptaculous/slider.js"></script>
script.aculo.us ライブラリの slider.js を読み込む。
<script type="text/javascript">
<!--
window . onload = function () {
new Control . Slider( 'slider-handle', 'slider-track', {
range: $R( -100, 100), // 範囲を -100～100 に設定
values: [ -100, -75, -50, -25, 0, 25, 50, 75, 100 ],
// ハンドル移動時の値を -100, -75, -50, -25, 0, 25, 50, 75, 100 に設定
sliderValue: '0', // 初期値を 0 に設定
onSlide: function( value ) { $( 'slider-value' ) . innerHTML = value },
// スライダーのハンドルをスライドさせているときの値を、id が slider-value の要素に表示
onChange: function( value ) { $( 'slider-value' ) . innerHTML = value }
// スライダーのハンドルの移動後の位置の値を、id が slider-value の要素に表示
} );
}
// -->
</script>
<!--
window . onload = function () {
new Control . Slider( 'slider-handle', 'slider-track', {
range: $R( -100, 100), // 範囲を -100～100 に設定
values: [ -100, -75, -50, -25, 0, 25, 50, 75, 100 ],
// ハンドル移動時の値を -100, -75, -50, -25, 0, 25, 50, 75, 100 に設定
sliderValue: '0', // 初期値を 0 に設定
onSlide: function( value ) { $( 'slider-value' ) . innerHTML = value },
// スライダーのハンドルをスライドさせているときの値を、id が slider-value の要素に表示
onChange: function( value ) { $( 'slider-value' ) . innerHTML = value }
// スライダーのハンドルの移動後の位置の値を、id が slider-value の要素に表示
} );
}
// -->
</script>