jQueryUIでスライダーを表示する

2015.04.14

jQueryUIでスライダーを表示する

jQueryUIでスライダーを表示します。

数値を入力する時にスライダーを使用します。

まずjqueryとjquery-ui.min.js、jquery-ui.cssをプリロードします。

<script src="http://code.jquery.com/jquery.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<link type="text/css" href="../css/jquery-ui.css" rel="stylesheet" />

スライダーにはいろいろなオプションがあります。

maxスライダーの最大値
minスライダーの最小値
range“min” or “max”
valueスライダーの初期値
<body>
<!-- コーディング部分 -->
 <script type="text/javascript">
 $(function(){
   $("#slider").slider({
     range:"min",
     value:5,
     max:10,
     min:1,
     slide:function(evnet,ui){
       $("#crank").val(ui.value)
     }
   });
 });
 </script>
 
 <form name="testForm">
 <label for="rank">ランクを選択してください:</label>
 <select name="rank" id="crank" value="">
 <option value="1">1
 <option value="2">2
 <option value="3">3
 <option value="4">4
 <option value="5" selected>5
 <option value="6">6
 <option value="7">7
 <option value="8">8
 <option value="9">9
 <option value="10">10
 </select>
 <br /><br />
 <!-- スライダー表示 -->
 <div id="slider"></div>
 </form>
 </body>

スライダーを動かすとセレクトボックスの値が変わり、逆にセレクトボックスの値を変えても、スライダーの値は変わりません。

セレクトボックス変更時にスライダーを変更するにはセレクトボックスのchangeイベントに処理を記述する必要があります。

$("#crank").change(function(){
  $("#slider").slider("value",$("#crank").val());
});

スライダー自体はあまり使い道がないように思います。

DEMO

jquery.uiの詳細はこちらをどうぞ。

jQueryUIでスライダーを表示する

コメント

タイトルとURLをコピーしました