Home > Article > Web Front-end > jquery rangeslider usage
jquery rangeslider usage
- 王林Original
- 2023-05-28 15:49:08462browse
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>Installation via NPM
You can also install jQuery Rangeslider via NPM. Execute the following command in the terminal:
npm install rangeslider.js
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>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>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!