jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. jQuery UI provides us a slider control through the slider widget.
The slider widget helps us to get a certain value using a given range. We can change the slider value by sliding. The instance() method is used to return the slider’s instance object. If the slider element has no associated element then it returns undefined.
Syntax:
$( ".selector" ).slider( "instance" );
Parameters: This method does not accept any parameters.
Return Value: This method returns the slider instance object.
CDN Link: First, add jQuery UI scripts needed for your project.
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Example: This example describes the jQuery UI Slider instance() method.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8" />
<title> jQuery UI Slider instance() Method </title>
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src=
"//code.jquery.com/jquery-1.12.4.js"></script>
<script src=
"//code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
h1 {
color: green;
}
#divID {
width: 600px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI Slider instance() Method</h2>
<div id="divID"></div>
<br>
<input type="button" id="btn" value="Slider Instance Value" style="padding: 5px 15px;">
<br>
<div id="res"></div>
</center>
<script>
$(function () {
$("#divID").slider();
$("#btn").on('click', function() {
var res = $("#divID").slider("instance");
console.log(res);
});
});
</script>
</body>
</html>
|
Output:
Reference: https://api.jqueryui.com/slider/#method-instance