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="http://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><br> <br>
	<!--テキストボックスのvalu値を変更-->
	<input size="2" id="idy_font" name="y_font" type="text" value="1" /><br> <br>
	<!--上記値変更に伴う画像を切替-->
	<div id="idFont01"><img id="idFimg" src="img1.jpg" alt="" border="0" width="50" height="50" /></div>
</div>

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

 
jquery-uiを使用してカスタムされた横スクロールバー(ハンドル)を表示するデモ
 
ソース元:Slider | jQuery UI
 

上記Jsですが、ここ5~6年で1度使用する機会が有るか無いかでした。