jquery rangeslider usage-Front-end Q&A-php.cn

jquery rangeslider usage

王林

Release： 2023-05-28 15:49:08

Original

498 people have browsed it

jQuery Rangeslider is a jQuery-based plug-in that allows you to easily create a draggable slider control. In this article, we'll show you how to use jQuery Rangeslider.

Install jQuery Rangeslider

jQuery Rangeslider can be installed in many ways, for example:

Introduced through a CDN link

You can add a CDN link to Get jQuery Rangeslider. This is the easiest way to install it:

<!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>

Copy after login

Installation via NPM

You can also install jQuery Rangeslider via NPM. Execute the following command in the terminal:

npm install rangeslider.js

Copy after login

Then, add the following code to your HTML file:

<!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>

Copy after login

Use jQuery Rangeslider

After the installation is complete, we You're ready to start using jQuery Rangeslider. The following is a usage example:

<!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>

Copy after login

This example shows how to use jQuery Rangeslider to add a draggable input slider control to a web page.

In the code, we first introduce the necessary CSS and JavaScript files.

Then, in an HTML input box element, we add the type="range" attribute, which will create a slider control in the web page.

Then, we use the jQuery selector to select the input box and call the rangeslider() method, which converts it into a draggable slider control.

When calling the rangeslider() method, we also passed some parameters:

polyfill: false. This parameter tells jQuery Rangeslider not to use polyfill functionality. Polyfill enables this functionality using JavaScript on older browsers that do not support the HTML5 slider control. But in modern browsers, this polyfill feature is of little use. Therefore, we set this parameter to false.
onSlide: function(position, value) {...}. This parameter tells jQuery Rangeslider what happens when you slide over the slider control. In this example, we define a function that will be called on every swipe. This function accepts two parameters: the slider's position and its current value. We output this function to the console so that we can view the output of this function in the console.

Summary

jQuery Rangeslider is a very practical jQuery plug-in that allows you to easily add a draggable input slider control to a web page. In this article, we showed you how to install jQuery Rangeslider and how to use it to create a slider control and pass some parameters to customize it. We hope this article helps you get started quickly with jQuery Rangeslider.

The above is the detailed content of jquery rangeslider usage. For more information, please follow other related articles on the PHP Chinese website!