script.aculo.us によるスライダーの値の範囲と初期値を指定

script.aculo.us ライブラリの slider.js による横方向のスライダーの値の範囲と初期値を指定する方法。最初は、初期値で設定した場所に、スライダーのハンドルを表示。スライダーのハンドルをドラッグし左右に動かすと、設定した範囲内の現在の値を動的に表示し、最終的には、移動後の位置の値を表示する。値は、設定した範囲を超えることはない。

実装例

値:0

実装例の動作について

スライダーの値の範囲は、-100~100 を指定してあり、初期設定値は、0 を指定してあるので、スライダーのハンドルは、トラックの中心にある。
スライダーのハンドル(黒い部分)をドラッグし左右に動かすと、スライダー下の「値:0」の数字が変化する。スライダーのハンドルを左端に動かすと「値:-100」になる。スライダーのハンドルを右端に動かすと「値:100」になる。その間は、-100より大きく、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', {
        range: $R( -100, 100),
        sliderValue: '0',
        onSlide: function( value ) { $( 'slider-value' ) . innerHTML = Math . round( value ) },
        onChange: function( value ) { $( 'slider-value' ) . innerHTML = Math . round( 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>

HTML

<div id="slider-track">
<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 に設定
        sliderValue: '0', // 初期値を 0 に設定
        onSlide: function( value ) { $( 'slider-value' ) . innerHTML = Math . round( value ) },
            // スライダーのハンドルをスライドさせているときの値を、小数点以下を四捨五入し、整数値にし、id が slider-value の要素に表示
        onChange: function( value ) { $( 'slider-value' ) . innerHTML = Math . round( value ) }
            // スライダーのハンドルの移動後の位置の値を、小数点以下を四捨五入し、整数値にし、id が slider-value の要素に表示
    } );
}
// -->
</script>

スライダーの値の小数点以下を四捨五入した整数値を、id が slider-value の要素に表示している。

スポンサード リンク

カテゴリー: GUI, JavaScript, prototype.js, script.aculo.us, slider パーマリンク