jQuery UIのスライダーで操作中の変化を検出


JavaScriptを使ったスライダーは、ライブラリにまとめられたものから生のJavaScriptまで数多くありますが、今回はjQuery UIのスライダを使用することにしました。


このスライダーは、yonchangeイベントを監視するだけでは操作中の変化を検出できません。マウスドラッグによる操作を終えてはじめてonchangeが発行されるため、ユーザの操作に動的に反応することができません。
そして、onchange以外を監視しているデモコードをあまり見かけません。

まず、jQuery UI公式ページのSliderデモおよび同デモのソースコードを参考にします。
デモコードの通りにしたところ、jQueryおよびjQuery UIを読み込むことができず「 $ is not defined. 」エラーに出会うことになってしまったので、Google APIから引っ張ってくるように書き換えました。

jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

jQuery UI
<link rel="stylesheet"href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
(上記jQueryのバージョンは2014/01時点のものです)

また、初期値の設定などはこちらのサイト様で詳しく説明されています。下のサンプルを作る際、参考にさせていただきました。

jQuery UI公式デモでは「スライド中に変化があったとき値を取得する」機能を使用していません。
使う場合は、下記のデモコードのようにします。

なお、console.logの出力が見られるコンソールは、Firefox/Chromiumの場合、Ctrl+Shift+Iで出すことができます。


デモコード:
<html>
<head>
 
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />
 
<title>jQuery Slider</title>

 
<!-- スライダに必要なjQueryUIなどの読み込み -->
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 
<link rel="stylesheet"href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
 
<script>
 
// スライダを初期化
 
$(function() {
 
 
 
// スライダーを作成
 
 
 
$('#slider').slider({
 
 
 
 
min: 0,
 
 
 
 
max: 100,
 
 
 
 
step: 2,
 
 
 
 
value: 50,
 
 
 
// スライダーの操作終了時に呼び出される
 
 
 
change: function(e, ev) {
 
 
 
 
console.log('changed slider :' + ev.value);
 
 
 
 
$('#num').val(ev.value);
 
 
 
},
 
 
 
// スライダーの初期化時に初期値を取得
 
 
 
create: function(e, ev) {
 
 
 
 
$('#num').val($(this).slider('option', 'value'));
 
 
 
},
 
 
 
// スライド中に変化を取得する
 
 
 
slide: function(e, ev) {
 
 
 
 
var s_val = $(this).slider('option', 'value')
 
 
 
 
console.log('changing slider' + s_val);
 
 
 
 
$('#num').val(s_val);
 
 
 
}
 
 
});
 
});
 
</script>

</head>
<body>
 
<input id="num"type="text"size="5" readonly>
 
<div id="slider"style="width:200px;"></div>
</body>
</html>

このブログの人気の投稿

GIMP2.8でイラストにペン入れを行う

squid3プロキシサーバの設定(Ubuntu13.10)

Ubuntu13.04で使える動画編集ソフト一覧