jquery rangesliderの使用法-フロントエンドQ&A-php.cn

jquery rangesliderの使用法

王林

リリース： 2023-05-28 15:49:08

オリジナル

498 人が閲覧しました

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 サイトの他の関連記事を参照してください。