jquery rangeslider 用法-前端問答-PHP中文網

jquery rangeslider 用法

王林

發布： 2023-05-28 15:49:08

原創

454 人瀏覽過

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>

登入後複製

使用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 在網頁中新增一個可用於拖曳的輸入滑桿控制項。

在程式碼中，我們首先引入了必要的 CSS 和 JavaScript 檔案。

然後，在一個 HTML 輸入框元素裡，我們加入了 type="range" 屬性，這會在網頁中建立一個滑桿控制項。

然後，我們使用 jQuery 選擇器選取這個輸入框，並呼叫 rangeslider() 方法，這會將它轉換成一個可拖曳的滑桿控制項。

在呼叫 rangeslider() 方法時，我們也傳遞了一些參數：

polyfill: false。這個參數告訴 jQuery Rangeslider 不要使用 polyfill 功能。 Polyfill 可以在不支援 HTML5 滑桿控制項的舊瀏覽器上使用 JavaScript 實作這個功能。但是在現代瀏覽器中，這個 polyfill 功能就沒什麼用處了。因此，我們設定這個參數為 false。
onSlide: function(position, value) {...}。這個參數告訴 jQuery Rangeslider 在滑桿控制上滑動時會發生什麼事。在這個例子中，我們定義了一個函數，它將在每次滑動時被呼叫。這個函數接受兩個參數：滑桿的位置和目前值。我們將這個函數輸出到控制台，以便在控制台中查看此函數的輸出結果。

總結

jQuery Rangeslider 是一個非常實用的 jQuery 插件，它可以讓你輕鬆地在網頁中加入一個可拖曳的輸入滑桿控制。在本文中，我們介紹瞭如何安裝 jQuery Rangeslider，以及如何使用它來建立一個滑桿控件，並傳遞一些參數來對其進行自訂配置。我們希望這個文章能夠幫助你快速入門 jQuery Rangeslider 的使用。

以上是jquery rangeslider 用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！