jQueryでスライダー

jQueryを使って、Sliderを作った。

jQuery UIについて

jQueryのプラグインで、 jQuery UIというものがあって様々なUIを提供している。こちらにスライダーがある。さまざまなオプションも簡単に指定できる。
jQuery UI
jQuery UIを利用するには？ – Build Insider
Slider | jQuery UI
Sliderウィジェットでスライダーを生成するには？ – Build Insider

今回は jQuery UIなしで

今回は、ツマミを動かすと範囲内を横移動しツマミよりも左側が黄色になるというシンプルなもの。
前回のドラッグアンドドロップ（jQueryでドラッグアンドドロップ | nackpan Blog）と、だいたい一緒ですね。移動方向を限定して、黄色バーをCSSのwidthを調整しています。

白い円がツマミになります。左右に動かす事が出来ます。

HTML

HTML側では、スライダー部分をslider-containerにまとめて、右側のバー、左側のバー、ツマミをおく。
my-containerはスライダーの周りの水色の部分。

<div id="my-container">
	<div id="slider-container">
		<div id="slider-right"></div>
		<div id="slider-left"></div>
		<div id="thumb"></div>
	</div>
</div>

CSS

thumbのpositionをslider-containerを基準にしたabsoluteにする。

#slider-container {
	position:relative;
	……略……
}
#thumb {
	position:absolute;
	……略……
}

javascript

javascript側では、ツマミでマウスボタンが押された(mousedown)なら、そのあとのマウスイベントをくっつける。
マウスが動いた(mousemove)とき、マウスボタンが離されたとき(mouseup)、マウスが所定の要素（今回はmy-containerと名付けた水色の部分）から離れた(mouseleave)とき。mouseupかmouseleaveでドラッグは終了と判断して、mousemove,mouseup,mouseleaveを取り外す。

$("#thumb").mousedown(function() {
	$("#my-container").mousemove(function(event){
		// 移動処理
	});
	
	$("#my-container").mouseleave(function(){
		$(this).unbind("mouseup mousemove mouseleave");
    });
	
	$("#my-container").mouseup(function(){
		$(this).unbind("mouseup mousemove mouseleave");
    });
});