sliderでsliderをslideする

Pocket

「こいつ何を言ってんだ・・・。」と思われても仕方ないタイトルですが、jQuery UI Sliderを使ってスライド切り替えを行うというただのネタ記事です。やってみたかっただけです。

スライダーというと画像やコンテンツをスライドして切り替えるものを思い浮かべる人が多いと思いますが、jQuery UI Sliderはツマミを移動して値を変更するUIのことです。

こういうやつです。

今回はこのjQuery UI Sliderを使ってスライドの切り替えを行う操作機能の作り方を紹介したいと思います。

※IE8〜11、Safari(Mac)、Firefox、Chromeで動作確認しています。

スライダーはjQueryを使ったスライダーの作り方とその仕組みで作ったものを流用しますが、配布されているスライダープラグインでもパブリックメソッドが用意されているものであれば応用して同じことができます。

今回使用するスライダーのソース

ということで、スライダーのソースはこちら。画像は適当なものを使ってください。
動作を見たい方はプレビューしてください。

 

jQuery UI Sliderをダウンロードする

jQuery UIのページからVersionを1.11.4、UI CoreからCore・Widget・Mouse、WidgetからSliderを選択してダウンロードしてください。

ss01

jQuery UI Sliderを設置する

まずはダウンロードしたファイルの中に入っている、jquery-ui.min.cssとjquery-ui.min.jsをHTMLから読み込みます。

パスは自分の環境に合わせて変更してください。

次にdiv#sliderをdiv.slider-containerの下に配置します。

最後にJavaScriptでjQuery UI Sliderを実行します。

これでとりあえずjQuery UI Sliderが動作するようになりました。

プレビュー

さて、ここからが本題です。
このjQuery UI Sliderのツマミをドラッグして値が変化したときにその値に合わせてスライドが切り替わるようにします。

jQuery UI Sliderの最大値を指定する

まずは値がスライドの数以上にならないようオプションでmaxの値を指定します。

スライドの数は即時関数の中にある変数slideNumに代入されていますので、これを使います。
ただし、この変数slideNumはローカル変数になっているので、即時関数の外からは参照できません。
そのため $('#slider').slider(); を即時関数の中に移動します。

また、スライドの数は0からカウントするため変数slideNumから1引いた値を指定します。

これでjQuery UI Sliderの値がスライドの数以上にならなくなりました。

プレビュー

jQuery UI Sliderのツマミの移動とスライドの切り替えを同期する

jQuery UI Sliderのslideイベントを使うことで、ツマミが移動したタイミングで特定の処理を実行することができます。
また、イベントの引数から現在の値を取得することができますので、この値を変数slideCurrentに代入してやりsliding()を実行します。

また、これだけではスライダーの矢印でスライドを切り替えたときにjQuery UI Sliderの値が変わらずツマミの位置も変わらないため、sliding()の中で値を指定します。

これでスライドの位置とツマミの位置が同期されました。

プレビュー

おまけ

応用するとjQuery UI Sliderの値とスライダーの位置を計算することでシームレスなスライドもできます。

プレビュー

jQuery UI Sliderの値は0〜100に対してスライドの位置(left)は0〜2000pxとなっているため、100のとき2000pxにならなければいけません。
こういう場合には百分率(%)を求めればうまく計算することができます。

例えば、最大値が2000pxとしたときに1500pxの割合を求める場合は「1500 / 2000 * 100」で75(%)となります。
この値をjQuery UI Sliderの値にします。

逆にjQuery UI Sliderの値が75としたときに、スライドの位置(left)を求める場合には「2000 / 100 * 75」で1500pxとなります。

こういった計算はアニメーションやUIを作るときに以外と使うので覚えておくといいです。

おわりに

ということで、jQuery UI Sliderを使ってスライダーをスライドさせる方法の紹介でした。
使う機会があるのかは不明ですがw

あと、この記事で公開しているコードは1ページに複数のスライダーを置くことを想定したものになっていないので注意してください。

ではでは ( ͡° ͜ʖ ͡° )ノシ

Pocket

コメントを残す