jQuery Mobile Rangeslider destroy() Method
Last Updated :
07 Jan, 2022
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 will use the jQuery Mobile Rangeslider destroy() Method. The destroy method removes the functionality of the rangeslider completely. After the rangeslider is destroyed, the element functions as its init state.
Syntax: Call the destroy method to destroy the rangeslider.
$("Selector").rangeslider("destroy");Parameter: This method doesn't accept any arguments.
Arguments: This method does not accept any arguments.
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 disabled the rangeslider by calling the destroy() method by button onclick. We can see two sliders in the output which are not working correctly.
HTML
<!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=
"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>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Rangeslider destroy() 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>
<button onclick="destroyRangeslider()"
style="text-align: center;">
Destroy Rangeslider
</button>
<script>
function destroyRangeslider() {
$(document).ready(function() {
$("#gfg").rangeslider("destroy");
});
}
</script>
</body>
</html>
Output:
Reference: https://api.jquerymobile.com/rangeslider/#method-destroy
Similar Reads
jQuery Mobile Slider destroy() Method jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Slider destroy() method to remove the slider functionality completely. This method does not accept any parameter
1 min read
jQuery Mobile Rangeslider disable() Method jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will discuss the jQuery Mobile Rangeslider disable() method. A range slider is used to get the data in the given range, It has two values. The f
1 min read
jQuery Mobile Rangeslider enable() Method Query Mobile is a set of HTML5 based user system interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive sites accessible to mobile, tabs, and desktops. In this article, we will learn about the Mobile Rangeslider enable() method. A ran
2 min read
jQuery Mobile Toolbar destroy() Method jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will use the jQuery Mobile Toolbar destroy() method to destroy the toolbar. The destroy() method completely removes the toolbar functionality fr
1 min read
jQuery Mobile Rangeslider option() Method 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
3 min read
jQuery Mobile Selectmenu destroy() Method jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive sites accessible to mobile, tabs, and desktops. The destroy() method is used to remove the selectmenu functionality completely an
1 min read