Class: Slider

2つの要素(ノブとコンテナ)からスライダーを生成します。

注意点:

• Sliderを使うには、標準準拠モードでページを作成する必要があります。

構文:

var mySlider = new Slider(element, knob[, options]);

引数:

1. element - (要素) スライドさせる要素。
2. knob - (要素) スライドのハンドラとなるノブ要素。
3. options - (オブジェクト) Sliderをカスタマイズするオプションオブジェクト。

オプション:

1. snap - (真偽値: 初期値=false) ノブを一番近い値にスナップさせたい場合にはtrueに設定。
2. offset - (数: 初期値=0) スライド開始時点のノブの相対的なオフセット。
3. range - (いろいろ: 初期値=false) 数の配列か、false。スライダーが使用する最大値と最小値。
4. wheel - (真偽値: 初期値=false) マウスホイールでノブを動かしたい場合はtrue。
5. steps - (数: 初期値=100) スライダーが動く時のステップ数。
6. mode - (文字列: 初期値=horizontal) スライドのタイプ。'horizontal'か'vertical'。

注意点:

• Rangeオプションは数の配列だけを受け付けます。正負の数を使用できます。

Sliderイベント: change

• (関数) スライダーの値が代わったときに発生します。

表記:

onChange(step)

引数:

1. step - (数) スライダーの現在値。

Sliderイベント: onComplete

• (関数) ドラッグを終了したときに発生します。

表記:

onComplete(step)

引数:

1. step - (文字列) スライダーの現在値を示す文字列。

Sliderイベント: tick

• (関数) ノブをドラッグしたときに発生します。このイベントはtickの挙動を上書きできます。

表記:

onTick(pos)

引数:

1. pos - (数) スライダーの現在値。

注意点:

• スライダーはノブの場所をスタイリングするときに'tick'イベントを使うようになっています。

戻り値:

• (オブジェクト) 新しいSliderインスタンス。

例:

var mySlider = new Slider('myElement', 'myKnob', {

    range: [-50, 50],
    wheel: true,
    snap: true,
    onStart: function(){

        this.borderFx = this.borderFx || this.element.tween('border').start('#ccc');
    },
    onTick: function(pos){

        this.element.setStyle('border-color', '#f00');
        this.knob.setStyle(this.property, pos);
    },
    onComplete: function(){

        this.element.tween('border').start('#000');
    }

});

Sliderメソッド: set

スライダーを指定した位置に動かします。

構文:

mySlider.set(step);

引数:

1. step - (数) スライダーの移動する位置。

戻り値:

• (オブジェクト) このSliderインスタンス。

例:

var mySlider = new Slider('myElement', 'myKnob');
mySlider.set(0);

var myPeriodical = (function(){
    if(this.step == this.options.steps) $clear(myPeriodical);
        this.set(this.step++);

}).periodical(1000, mySlider);

注意点:

• Stepは自動的に0からstepsオプションの値の間に制限されます。