jQuery Mobile Rangeslider refresh() Method

Last Updated : 29 Dec, 2021

jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for various purposes build on top of jQuery. In this article, we will learn about the Mobile Rangeslider refresh() method.

A Rangeslider 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. The refresh() method is used to re-render the created rangeslider.

Syntax:

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

Parameters: This method does not accept any parameters.

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

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>

Example: In this example, we first change the values of the rangeslider and then invoke the refresh() method to refresh the slider to the correct values.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> 
    <script src= 
"https://code.jquery.com/jquery-3.2.1.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"> 
    </script> 
  
    <script> 
        $(document).ready(function () { 
  
            // Only refresh the values 
            $("#changeBtn").on('click', function () { 
                $("#range-slider-1").val(9); 
                $("#range-slider-2").val(68); 
            }); 
  
            // Update the slider to reflect the new values 
            $("#refreshBtn").on('click', function () { 
                $("#GFG").rangeslider("refresh"); 
                alert("Refreshed"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <div data-role="page"> 
        <div data-role="header"> 
            <h1 style="text-align: center;"> 
              GeeksforGeeks 
            </h1> 
            <h3 style="text-align: center;"> 
                jQuery Mobile Rangeslider 
                refresh() Method 
            </h3> 
        </div> 
        <div role="main" class="ui-content"> 
            <div data-role="rangeslider" id="GFG"> 
                <label for="range-slider-1"> 
                  Rangeslider: 
                </label> 
                <input name="range-slider-1" 
                       id="range-slider-1" min="0"
                       max="100" value="30" type="range"> 
  
                <label for="range-slider-2"> 
                  Rangeslider: 
                </label> 
                <input name="range-slider-2" 
                       id="range-slider-2" min="0"
                       max="100" value="96" type="range"> 
            </div> 
  
            <input type="button" id="changeBtn"
                   style="width: 250px;" 
                   value="Change slider values"> 
            <input type="button" id="refreshBtn"
                   style="width: 250px;" 
                   value="Refresh"> 
        </div> 
    </div> 
</body> 
  
</html>