jQuery Mobile is a set of HTML5 based user interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive websites accessible to mobile, tabs, and desktops. The rangeslider widget of jQuery Mobile is a double handle slider. The sliders have a min and a max value to be set and we can choose from the range in between min and max.
In this article, we are going to learn the jQuery Mobile Rangeslider option() method. Using this method, we can get, set or update any parameter’s value of the rangeslider widget. We can also get all the options as key-value pairs using this method.
Syntax:
1. If we need any option’s value, pass the option name in the option(optionName) method. optionName should be a string.
- optionName: It is the input that we need to pass in form of a string for which we need to get the value.
- return: We get the respective return based on the option data type.
var isHighlighted = $("Selector").rangeslider("option", "highlight");2. Get all the options with their values as key-value pairs by just calling the option method and nothing is needed to be passed to the method.
- input: We need to call the option method. Nothing should be passed as input.
- return: We get the list of key-value pairs of all the options as optionName-optionValue.
var options= $("Selector").rangeslider("option");3. Set the value of any option by calling the option(optionName, value) with the optionName and the value that we need to pass.
- optionName: When calling the option method, first the option name should be passed, which is of string type.
- value: While calling the method, we need to pass the option’s value, which is of the object type.
$("Selector").rangeslider("option", "highlight", "false");4. To set multiple options instead of only one, call the option(options) method where options are the list of options.
- options: It is the map of the optionName-value pairs as input to set the options corresponding to the values passed, which is of the object type.
$("Selector").rangeslider("option", {highlight: false, disabled: true});CDN Links: Use the following CDN links for your jQuery Mobile project.
<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
Example: In the following example, we have first set the theme of rangeslider and then logged all the options with their values.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Rangeslider option() Method</h3>
<div data-role="rangeslider" id="gfg">
<label for="range-slider-1">
Rangeslider:
</label>
<input name="range-slider-1" min="0" max="100" value="10" type="range">
<label for="range-slider-2">
Rangeslider:
</label>
<input name="range-slider-2" min="0" max="100" value="60" type="range">
</div>
<script>
$(document).ready(function() {
$("#gfg").rangeslider("option", "theme", "b");
var options = $("#gfg").rangeslider("option");
console.log(options);
});
</script>
</body>
</html>
|
Output:
Reference: https://api.jquerymobile.com/rangeslider/#method-option