Skip to content
Related Articles

Related Articles

jQuery Mobile Rangeslider disable() Method

View Discussion
Improve Article
Save Article
Like Article
  • 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>

Output:

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!