jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI for the webpages. It provides us a slider control through the slider widget. Slider helps us to get a certain value using a given range. In this article we will see how to use the option() method in jQuery UI slider. The option() method is used to get an object for the particular current slider option.
Syntax:
option(optionName) Method $( ".selector" ).slider( "option", "disabled" );
or
option() Method
$( ".selector" ).slider("option");or
option(optionName, value) Method $( ".selector" ).slider( "option", "disabled", true );
or
option(options) Method
$( ".selector" ).slider( "option", { disabled: true } );Approach: First, add jQuery UI scripts needed for your project.
<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel = “stylesheet”>
<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
Example 1: This example describes the implementation of option() method.
<!doctype html> <html lang="en">
<head>
<meta charset="utf-8">
<link href=
rel="stylesheet">
</script>
</script>
<script>
$(function() {
$("#gfg").slider();
var a = $("#gfg").slider("option");
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI slider option() method</h2>
<div id="gfg"></div>
</body>
</html>
|
Output:
Example 2: This example describes the implementation of option(optionName, value) method.
<!doctype html> <html lang="en">
<head>
<meta charset="utf-8">
<link href=
rel="stylesheet">
</script>
</script>
<script>
$(function() {
$("#gfg").slider();
$("#gfg").slider("option", "disabled", true);
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI slider option(optionName, value) Method</h2>
<div id="gfg"></div>
</body>
</html>
|
Output:
Example 3: This example describes the implementation of option(options) method.
<!doctype html> <html lang="en">
<head>
<meta charset="utf-8">
<link href=
rel="stylesheet">
</script>
</script>
<script>
$(function() {
$("#gfg").slider();
$("#gfg").slider("option", {
disabled: true
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI slider option(options) Method</h2>
<div id="gfg"></div>
</body>
</html>
|
Output:
Example 4: This example describes the implementation of option(optionName) method.
<!doctype html> <html lang="en">
<head>
<meta charset="utf-8">
<link href=
rel="stylesheet">
</script>
</script>
<script>
$(function() {
$("#gfg").slider();
var a = $("#gfg").slider("option", "disabled");
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI slider option(optionName) Method</h2>
<div id="gfg"></div>
</body>
</html>
|
Output:
Reference: https://api.jqueryui.com/category/widgets/