jQuery UI でスライダーUIを実装
2022.03.04
jQuery UI を利用することで、つまみを左右にドラッグして操作するスライダーUIを簡単に作成することができます。 jQuery UI は2021年10月の時点で開発終了してしまいましたが、メンテナンスは継続されるようです。

220304_oshi.png


基本の実装

●jQuery UI をダウンロード
以下のサイトからjQuery UI をダウンロードします。
その際、不要な機能を除外したり、好みのテーマを選ぶこともできます。
https://jqueryui.com/

●HTML
・ダウンロードした以下のファイルを任意の場所に格納し、jQueryと併せて読み込みます。
 また、imagesフォルダも同じ場所に格納しておきます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="jquery-ui.min.css" rel="stylesheet" />
<script src="jquery-ui.min.js"></script>



・<body>内に以下のタグを記述。

<div id="jquery-ui-slider"></div>


●JavaScript

<script type="text/javascript">
  $(function() {
    $('#jquery-ui-slider').slider({
      min: 0,
      max: 10,
      value: 0,
      slide: function( event, ui ) {
        /* ここに処理を記述 */
        console.log(ui.value);
      }
    });
  });
</script>

以上で実装完了です。

実装デモ


スマホ対応

スライダーはそのままではスマホで操作することができません。
jQuery UI Touch Punch」を使うことで、スマホでの操作に対応させることができます。
ダウンロードサイトからダウンロードし、読み込みます。

<script src="jquery.ui.touch-punch.min.js"></script>

こちらは読み込むだけで完了です。
| コメント(0)

月別アーカイブ