スライダー
スライダーを表示するためのモジュールsliderの説明を行います。V3.0.0ではスキン（cssで書かれた外観表示指定）は1つのみでしたが、V3.1.0になって増えています。標準のスライダーを表示してみましょう。以下が例題起動時の画面です。
図2：例題起動時画面
以下のリスト3を見てください。
［リスト3］sliderの例題（WT_slider.html）
YUI().use("slider", function (Y) {
var xInput,yInput;
//水平スライダー
xInput = Y.one( "#Hvalue" );
var xslider= new Y.Slider({ //（1）
axis: 'x',
min : 0, // 最小値
max : 100, // 最大値
value : 0, // 初期値
length: '100px', // 長さ
after : {
valueChange: function(){
xInput.set("value",xslider.getValue());
}
}
});
xslider.render( "#Hs" ); //（2）
//垂直スライダー
yInput = Y.one( "#Vvalue" );
var yslider=new Y.Slider({ //（3）
axis: 'y',
min : 0, // 最小値
max : -100, // 最大値
value : -0, // 初期値
length: '100px', // 長さ
after : {
valueChange: function(){
yInput.set("value",yslider.getValue());
}
}
});
yslider.render( "#Vs" ); //（4）
});
</script>
</head>
<body class="yui3-skin-sam">
<h4>slider</h4><br>
<div id="demo">
<h4>水平スライダー</h4>
<p>Value:
<input id="Hvalue" value="0">
<span id="Hs"></span>
</p>
<h4>垂直スライダー</h4>
<p>Value:
<input id="Vvalue" value="-0"></p>
<div id="Vs"></div>
</div>
</body>
（1）と（3）はそれぞれ、水平／垂直スライダーの設定です。水平か垂直はaxisプロパティに'x'か'y'を置くことで指定できます。afterは、イベントを指定するプロパティです。afterプロパティのvalueChangeは値が変わったとき実行されます。他のイベントを以下の表に示します。
Y.Sliderのイベント
| イベント | 概要 |
| slideStart | スライド開始時 |
| thumbMove | スライド移動時 |
| valueChange | 値が変わったとき |
| slideEnd | スライド終了時 |
| railMouseDown | スライダー上でマウスが押された |
（2）と（4）でスライダーを表示します。スライダーの設定値の読み出しは.getValue()、書き込みは.setValue(newVal)となります。
V3.1.0でスライダーの形のサポートが増えました。増えたスライダーを図示します。
図3：スライダーのスキン一覧
