Skip to content
Related Articles

Related Articles

jQuery UI Slider animate Option
  • Last Updated : 02 Mar, 2021

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :