Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery UI Slider orientation 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 slider widget. Slider helps us to get a certain value using a given range. In this article we will see how to set the orientation option in a slider. The orientation option is used to set the orientation of the slider.

Syntax:

$(".selector").slider(
   { orientation : 'horizontal'}
);

Parameters: This option accepts one parameter as discussed below:

  • string : The orientation of the slider to be set. By default, the value is orientation.
     

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 string value as vertical.

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

Output:

Example 2: In this example, we will be using string value as horizontal

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

Output:


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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!