jQuery Mobile Rangeslider disable() Method

Last Updated : 20 Dec, 2021

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 first value represents the lower range and the last value represents the upper range. This is used to get the slider in the given range slider. The disable() method is used to disable the created range slider in jquery.

Syntax:

$('selector').rangeslider('disable');

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”//code.jquery.com/jquery-1.10.2.min.js”></script>
<script src=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example:

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
  
    <link rel="stylesheet" href= 
"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
  
    <script src="//code.jquery.com/jquery-1.10.2.min.js"> 
    </script> 
  
    <script src= 
"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
    </script> 
  
    <script> 
        $(document).ready(function () { 
          $( "#rangesliderID" ).rangeslider( "disable" ); 
        }); 
    </script> 
</head> 
  
<body> 
    <div data-role="page" id="page1"> 
        <div data-role="header"> 
            <h2 style="color:green">GeeksforGeeks</h2> 
            <h3>jQuery Mobile Rangeslider disable() method</h3> 
        </div> 
  
        <div data-role="rangeslider" id="rangesliderID"> 
            <label for="range-slider-1">Rangeslider:</label> 
            <input name="range-slider-1" min="0"
                max="100" value="30" type="range"> 
  
            <label for="range-slider-2">Rangeslider:</label> 
            <input name="range-slider-2" min="0"
                max="100" value="80" type="range"> 
        </div> 
    </div> 
</body> 
</html> 