2022.03.04
jQuery UI を利用することで、つまみを左右にドラッグして操作するスライダーUIを簡単に作成することができます。
jQuery UI は2021年10月の時点で開発終了してしまいましたが、メンテナンスは継続されるようです。
基本の実装
●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>内に以下のタグを記述。
●JavaScript
以上で実装完了です。
実装デモ
スマホ対応
スライダーはそのままではスマホで操作することができません。
「jQuery UI Touch Punch」を使うことで、スマホでの操作に対応させることができます。
ダウンロードサイトからダウンロードし、読み込みます。
こちらは読み込むだけで完了です。
基本の実装
●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>
こちらは読み込むだけで完了です。
コメントする