スマホ、タブレット対応のjQueryスライダー

2011/12/11 | JavaScript/Ajax

jQueryで「スライダー」といえばjQuery UIのプラグインにあるようなバーを移動(スクロール)させて値を変化させるようなもののことだと思っていたら、実際はイメージスライダーというものばかりにぶち当たる。やっと希望のものが見つかったのでメモしておく。

スマホやタブレットでjQuery UIのスライダーを使おうとすると上手く動作してくれない。マウスでつまむ動作には対応しているものの、タップして移動、という動作には対応していないようだ。jQuery Mobileにはそれがあるのだが、単体では使えないっぽい。<input type=”range” />を使う方法もあり、それはスマホやタブレットでも動作してくれるが、IEで動いてくれない(IE9でもダメ)。

で、見つけたのがdragdealer。jQueryプラグインではないもののスマホ、タブレット、IE他ブラウザを問わず利用できるすぐれもの。コールバック関数callbackを引数で与えれば、変化後の値を読み取ることができるし、animationCallbackを引数で与えれば変化中の処理も与えることができる。

すごーい。しかもライセンスはMIT。いうことなし。早速使って見ることにする。


守谷市(まちの情報ポータル) 無料アンケートレンタルjpForm.net