slider：jquery-uiを使用してカスタムされた横スクロールバー（ハンドル）を表示する方法

カスタムされたスクロールバーのゲージ（ハンドル）を調整して、値を調整する様なコンテンツ制作時に使用しました。

1．ヘッダーとJavaScriptの記述

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
  var drawData = {
        brushSize : 1
      };
	  
  $("#slider01").slider(
      {
        min: 1,	//最小値
        max: 5,	//最大智
        value : 1,	//変更値
        slide : function(evt, ui){
			drawData.brushSize = ui.value;
			$( "#idFimg" ).attr('src','img'+drawData.brushSize+'.jpg');	//切替り画像
			$( "#idy_font" ).attr('value',drawData.brushSize);		//切替りvalue値
		}
      }
    );
});
</script>

2．CSSの記述

<style type="text/css">
<!--
#slider01 {
	height:8px;
	background:url(bg_slide01.jpg) left 3px repeat-x;
	border:none;
}
-->
</style>

横スクロールバーの背景イメージを設定

3．HTMLの記述

<div id="idWrap">
	<!--カスタム横スクロールバー-->

<div id="slider01"></div>

　
	<!--テキストボックスのvalu値を変更-->
	<input size="2" id="idy_font" name="y_font" type="text" value="1">
　
	<!--上記値変更に伴う画像を切替-->

<div id="idFont01"><img id="idFimg" src="img1.jpg" alt="" border="0" width="50" height="50"></div>

</div>

カスタム横スクロールバーをスライドすると、テキストボックスのvalu値と画像が切替ります。

jquery-uiを使用してカスタムされた横スクロールバー（ハンドル）を表示するデモ

ソース元：Slider | jQuery UI