ホームページ >ウェブフロントエンド >フロントエンドQ&A >jquery rangesliderの使用法
jquery rangesliderの使用法
- 王林オリジナル
- 2023-05-28 15:49:08466ブラウズ
jQuery Rangeslider は、ドラッグ可能なスライダー コントロールを簡単に作成できる jQuery ベースのプラグインです。この記事ではjQuery Rangesliderの使い方を紹介します。
jQuery Rangeslider のインストール
jQuery Rangeslider はさまざまな方法でインストールできます。たとえば、次のとおりです。
CDN リンクを通じて導入
CDN リンクを追加できます。 jQuery Rangeslider を取得します。これが最も簡単なインストール方法です。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Rangeslider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
</head>
<body>
<input type="range" min="0" max="100" value="50" id="myRange">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
<script>
$(document).ready(function(){
$('#myRange').rangeslider();
});
</script>
</body>
</html>NPM 経由のインストール
NPM 経由で jQuery Rangeslider をインストールすることもできます。ターミナルで次のコマンドを実行します:
npm install rangeslider.js
次に、次のコードを HTML ファイルに追加します:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Rangeslider</title>
<link rel="stylesheet" href="./node_modules/rangeslider.js/dist/rangeslider.min.css" />
</head>
<body>
<input type="range" min="0" max="100" value="50" id="myRange">
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/rangeslider.js/dist/rangeslider.min.js"></script>
<script>
$(document).ready(function(){
$('#myRange').rangeslider();
});
</script>
</body>
</html>Use jQuery Rangeslider
インストールが完了したら、 jQuery Rangeslider の使用を開始する準備ができました。以下に使用例を示します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Rangeslider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
</head>
<body>
<input type="range" min="0" max="100" value="50" id="myRange">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
<script>
$(document).ready(function(){
$('#myRange').rangeslider({
polyfill: false,
onSlide: function(position, value) {
console.log('position: ' + position, ' value: ' + value);
}
});
});
</script>
</body>
</html>この例では、jQuery Rangeslider を使用して、ドラッグ可能な入力スライダー コントロールを Web ページに追加する方法を示します。
コードでは、まず必要な CSS ファイルと JavaScript ファイルを導入します。
次に、HTML 入力ボックス要素に type="range" 属性を追加します。これにより、Web ページにスライダー コントロールが作成されます。
次に、jQuery セレクターを使用して入力ボックスを選択し、rangeslider() メソッドを呼び出します。これにより、入力ボックスがドラッグ可能なスライダー コントロールに変換されます。
rangeslider() メソッドを呼び出すときに、いくつかのパラメーターも渡しました:
- polyfill: false。このパラメータは、jQuery Rangeslider にポリフィル機能を使用しないように指示します。 Polyfill は、HTML5 スライダー コントロールをサポートしていない古いブラウザーで JavaScript を使用してこの機能を有効にします。しかし、最新のブラウザでは、このポリフィル機能はほとんど役に立ちません。したがって、このパラメータを false に設定します。
- onSlide: 関数(位置, 値) {...}。このパラメータは、スライダー コントロール上をスライドしたときに何が起こるかを jQuery Rangeslider に指示します。この例では、スワイプごとに呼び出される関数を定義します。この関数は、スライダーの位置とその現在値の 2 つのパラメーターを受け入れます。この関数の出力をコンソールで確認できるように、この関数をコンソールに出力します。
概要
jQuery Rangeslider は、ドラッグ可能な入力スライダー コントロールを Web ページに簡単に追加できる非常に実用的な jQuery プラグインです。この記事では、jQuery Rangeslider をインストールする方法と、それを使用してスライダー コントロールを作成し、いくつかのパラメーターを渡してカスタマイズする方法を説明しました。この記事が、jQuery Rangeslider をすぐに使い始めるのに役立つことを願っています。
以上がjquery rangesliderの使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。