Orientation

This property is used to set the Slider in either horizontal or vertical direction. By default, Slider renders in horizontal direction. Data type of this property is “enum”.

Possible Slider orientations are as follows,

Property Table for JavaScript

Property Allowed values Description
orientation ej.Orientation.Vertical Displays the Slider in vertical direction
ej.Orientation.Horizontal (default value) Displays the Slider in horizontal direction

The following steps explains you on how to configure the orientation property.

In an HTML page, add a <div> element to render it as a Slider widget.

  • html
  • <div id="ejSlider"></div>
  • javascript
  • // When initializing the Slider widget, configure the orientation property as follows.
    
    /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module SliderComponent {
        $(function () {
            var slider = new ej.Slider($("#ejSlider"), {
                height: "150",
                width: "20",
                orientation:ej.Orientation.Vertical
            });
        });
     }

    Execute the above code example to render the following output.