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>