Slider、jQuery UIを使用してカスタムされた横スクロールバー（ハンドル）を表示する方法｜DAD UNION

この記事では、SliderとjQuery UIを使用してカスタムされた横スクロールバーを実装する方法を、初心者でもわかりやすく解説します。

カスタム横スクロールバーは、ユーザー体験を向上させる便利なUI要素です。この記事では、具体的なコード例を交えてその実装方法を学びます。

Contents

JavaScriptの記述
CSSの記述
HTMLの記述
jquery-uiを使用してカスタムされた横スクロールバー（ハンドル）を表示するデモページ
ソース元：Slider | jQuery UI
まとめ

JavaScriptの記述

※jquery.min.js、jquery-ui.min.jsファイルを読み込みます。横スクロールバー（ハンドル）エリア（#slider01）に最小値、最大値、変更値、画像等を設定します。

<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>

CSSの記述

※jquery-ui.cssファイルを読み込みます。横スクロールバー（ハンドル）エリア（#slider01）のスタイル、背景イメージを設定します。

<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.2em;
	text-align:center;
	padding-bottom:15px;
}
a{
	font-size:16px;
	text-decoration:none;
}
p{
	text-align:center;
}
#idWrap{
	width:235px;
	margin:0 auto;
	text-align:center;
}
#slider01 {
	height:8px;
	background:url(bg_slide01.jpg) left 3px repeat-x;
	border:none;
}
input{
	 text-align:center;
}
-->
</style>

HTMLの記述

※横スクロールバー（ハンドル）エリア（id=”slider01″）のスタイル、スクロールによって切り替わるサムネイル画像を設定します。必要に応じて変更して下さい。

<h1>jquery-uiを使用してカスタムされた横スクロールバー（ハンドル）を表示</h1>
<p>下のカスタム横スクロールバーをスライドさせると、下のテキストボックスの値と画像が切替ります。</p>
<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値と画像が切替ります。