1

jQuery Mobile Rangeslider destroy() Method

 4 weeks ago
source link: https://www.geeksforgeeks.org/jquery-mobile-rangeslider-destroy-method/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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.

<!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 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:

jQuery Mobile Rangeslider destroy() Method

Reference: https://api.jquerymobile.com/rangeslider/#method-destroy

Here's a complete roadmap for you to become a developer: Learn DSA -> Master Frontend/Backend/Full Stack -> Build Projects -> Keep Applying to Jobs
And why go anywhere else when our DSA to Development: Coding Guide helps you do this in a single program! Apply now to our DSA to Development Program and our counsellors will connect with you for further guidance & support.

Like Article
Suggest improvement
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK