カスタムされたスクロールバーのゲージ(ハンドル)を調整して、値を調整する様なコンテンツ制作時に使用しました。
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