script.aculo.us ライブラリの slider.js による縦方向のスライダーは、通常、上が最小値、下が最大値だが、これを逆にし、上が最大値、下が最小値にする。
スライダーのハンドルをドラッグし上下に動かすと、現在の値を動的に表示し、最終的には、移動後の位置の値を表示する。スライダーのハンドルを上端に移動すると、最大値となり、スライダーのハンドルを下端に移動すると、最小値となる。
実装例
70
実装例の動作について
スライダーの初期値は、「70」を指定してある。
スライダーのハンドル（黒い部分）をドラッグし上下に動かすと、スライダー下の「70」の数字が変化する。スライダーのハンドルを下端に動かすと「0」になる。スライダーのハンドルを上端に動かすと「100」になる。その間は、0より大きく、100より少ない、整数になる。
スライダーのトラック部分（グレーの部分）をクリックすると、瞬時に、その位置へハンドルが動く。
ソースコード
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', {
axis: 'vertical',
range: $R( 0, 100),
sliderValue: '30',
onSlide: function( value ) { $( 'slider-value' ) . innerHTML = Math . round( 100 - value ) },
onChange: function( value ) { $( 'slider-value' ) . innerHTML = Math . round( 100 - 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', {
axis: 'vertical',
range: $R( 0, 100),
sliderValue: '30',
onSlide: function( value ) { $( 'slider-value' ) . innerHTML = Math . round( 100 - value ) },
onChange: function( value ) { $( 'slider-value' ) . innerHTML = Math . round( 100 - value ) }
} );
}
// -->
</script>
CSS
<style type="text/css">
<!--
#slider-track {
background-color: gainsboro;
width: 20px;
height: 100px;
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;
}
#slider-value {
background-color: black;
color: white;
width: 22px;
font-size: 10px;
text-align: center;
border-radius: 5px;
margin-top: 2px;
}
-->
</style>
<!--
#slider-track {
background-color: gainsboro;
width: 20px;
height: 100px;
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;
}
#slider-value {
background-color: black;
color: white;
width: 22px;
font-size: 10px;
text-align: center;
border-radius: 5px;
margin-top: 2px;
}
-->
</style>
HTML
<div id="slider-track">
<div id="slider-handle"></div>
</div>
<div id="slider-value">70</div>
<div id="slider-handle"></div>
</div>
<div id="slider-value">70</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', {
axis: 'vertical', // スライダーを縦にする
range: $R( 0, 100), // 範囲を 0～100 に設定
sliderValue: '30', // 初期値を 30 に設定
onSlide: function( value ) { $( 'slider-value' ) . innerHTML = Math . round( 100 - value ) },
// スライダーのハンドルをスライドさせているときの値を 100 から減算した値を、さらに四捨五入し整数値にし、id が slider-value の要素に表示
onChange: function( value ) { $( 'slider-value' ) . innerHTML = Math . round( 100 - value ) }
// スライダーのハンドルの移動後の位置の値を 100 から減算した値を、さらに四捨五入し整数値にし、id が slider-value の要素に表示
} );
}
// -->
</script>
<!--
window . onload = function () {
new Control . Slider( 'slider-handle', 'slider-track', {
axis: 'vertical', // スライダーを縦にする
range: $R( 0, 100), // 範囲を 0～100 に設定
sliderValue: '30', // 初期値を 30 に設定
onSlide: function( value ) { $( 'slider-value' ) . innerHTML = Math . round( 100 - value ) },
// スライダーのハンドルをスライドさせているときの値を 100 から減算した値を、さらに四捨五入し整数値にし、id が slider-value の要素に表示
onChange: function( value ) { $( 'slider-value' ) . innerHTML = Math . round( 100 - value ) }
// スライダーのハンドルの移動後の位置の値を 100 から減算した値を、さらに四捨五入し整数値にし、id が slider-value の要素に表示
} );
}
// -->
</script>
スライダーのハンドルの位置の値を、100 から減算することで、上が最大値の 100 、下が最小値の 0 になるようにしている。