jQuery UI Slider orientation Option

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

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

    <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

jQuery UI Slider orientation Option

Explore