Open In App

jQuery UI Slider animate Option

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

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. jQueryUI 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 animate a slider. The animate option when set to true will create an animation effect when you directly click at any point on the slider’s axis

Syntax:

$(".selector").slider(
   { animate: value }
);

Parameters: This option accepts three parameters as discussed below:

  • boolean: If set to true, the slider will be animated. By default, the value is false
  • string: The string value used to set the speed of the slider cursor. The available values are slow, normal, fast.
  • number: The duration of the animation in milliseconds.
     

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

<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>

Example 1: In this example, we will be using the boolean value.

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({ animate: true });
      });
    </script>
  </head>
  
  <body>
    <h1>GeeksforGeeks</h1>
    <h2>jQuery UI | slider animate option</h2>
    <div id="gfg"></div>
  </body>
</html>


Output:

Example 2: In this example, we will be using a string value. 

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({ animate: "fast" });
      });
    </script>
  </head>
  
  <body>
    <h1>GeeksforGeeks</h1>
    <h2>jQuery UI | slider animate option</h2>
    <div id="gfg"></div>
  </body>
</html>


Output:

Example 3: In this example, we will be using the number value.

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({ animate: 1000 });
      });
    </script>
  </head>
  
  <body>
    <h1>GeeksforGeeks</h1>
    <h2>jQuery UI | slider animate option</h2>
    <div id="gfg"></div>
  </body>
</html>


Output:

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



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