Open In App

jQuery UI Slider range Option

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI provides us a slider control through the slider widget. Slider helps us to get a certain value using a given range. In this article, we will see how to set the range option in a slider. The range option is used to set the range of a slider.

Syntax:

$(".selector").slider(
   { range : 'string' | boolean}
);

Parameters: This option accepts two parameters as described below.

  • string : The range of the slider to be set. Available values are min, max
  • boolean: If set to true, the slider has two handles. By default, the value is false.

CDN Link: First, add jQuery UI scripts CDN link, needed for your task.

<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel = “stylesheet”>

<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>

<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Below examples illustrate the jQuery UI Slider range Option:

Example 1: In this example, we will be using the boolean value and set is as true.

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href=
              rel="stylesheet" />
        <script src=
        </script>
        <script src=
        </script>
  
        <script>
            $(function () {
                $("#gfg").slider({ range: true });
            });
        </script>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>jQuery UI | slider range Option</h2>
        <div id="gfg"></div>
    </body>
</html>


Output:

Example 2: In this example, we will be using the string value and set is as max

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href=
              rel="stylesheet" />
        <script src=
        </script>
        <script src=
        </script>
        <script>
            $(function () {
                $("#gfg").slider({ range: "max" });
            });
        </script>
    </head>
  
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>jQuery UI | slider range Option</h2>
        <div id="gfg"></div>
    </body>
</html>


Output:

Example 3: In this example, we will be using the string value as min.

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href=
              rel="stylesheet" />
        <script src=
        </script>
        <script src=
        </script>
        <script>
            $(function () {
                $("#gfg").slider({ range: "min" });
            });
        </script>
    </head>
  
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>jQuery UI | slider range Option</h2>
        <div id="gfg"></div>
    </body>
</html>


Output:

Reference: https://api.jqueryui.com/slider/#option-range



Last Updated : 27 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads