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

jQueryUIでスライダーを表示する
1. 関連

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の詳細はこちらをどうぞ。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
資格：少額短期保険募集人,FP3級,宅建士

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

関連

コメント