YUI 3のスライダー

実行例

スライダーを操作することで数値が設定されます。他方で数値を入力すると、スライダーが移動します。

サンプルコード

HTML

スライダーを描画するための要素を用意し、そこにid属性を設定します。

またスライダーはスタイルシートで画像として設定されるため、スライダーを内包する要素のクラスに「yui3-skin-sam」を指定します。Skinning - Slider

<div class="yui3-skin-sam">
    <input id="text"/>         <!-- 数値テキストの要素 -->
    <span id="slider"></span>  <!-- スライダーの要素 -->
</div>

JavaScript

var SLIDER_ID = '#slider';
var TEXT_ID = '#text';

// スライダー モジュールを読み込み、読み込み完了後に関数を実行する
YUI().use( 'slider', function( Y )
{
    // スライダーを更新する
    function UpdateSlider( e )
    {
        var data = this.getData();

        if( data.timer )
        {
            // タイマーが有効な状態ならば、それをキャンセルする
            data.timer.cancel();
        }

        // スライダーの値を10進数で取得する
        var value = parseInt( this.get( 'value' ), 10 );

        if( !isNaN( value ) )
        {
            // キー入力を待つために、関数を遅延実行する
            data.timer = Y.later(
                200,            // 遅延時間 [ms]
                data.slider,    // 関数に渡すオブジェクト
                function()
                {
                    // タイマーを無効にする
                    data.timer = null;

                    // スライダーの値を設定する
                    this.set( 'value', value );
                }
             );
         }
    }

    // 数値テキストを更新する
    function UpdateText( e )
    {
        this.set( 'value', e.newVal );
    }


    // 既定値でスライダーを作成する
    var xSlider = new Y.Slider();

    xSlider.set( 'min', -100 );       // スライダーの最小値
    xSlider.set( 'max', +100 );       // スライダーの最大値
    xSlider.set( 'length', '201px' ); // スライダーの表示サイズ


    // 数値テキストのノードを取得する
    var xInput = Y.one( TEXT_ID );

    // 数値テキストをスライダーに関連付ける
    xInput.setData( { slider: xSlider } );

    // 数値テキストのkeyupイベントにハンドラを登録する
    xInput.on( 'keyup', UpdateSlider );

    // スライダーのvalueChangeイベントにハンドラを登録する
    xSlider.after( 'valueChange', UpdateText, xInput );

    // スライダーを描画する
    xSlider.render( SLIDER_ID )
} );

メソッドの解説

void render ( parentNode )

初期化を確定し、ウィジェットの描画を行います。これは初期化時に一度だけ実行するものです。parentNodeはウィジェットを描画する親となるノードで、DOMのノードもしくはCSSのセレクタで指定します。API: widget Widget - render Method

参考