New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Orientation

Horizontal slider (default)

Vertical slider (Orientation="Vertical")
The Orientation property of the RadSlider defines how the slider will be displayed in the page - vertically or horizontally. By default the slider will render horizontally. To use the property:
  • declaratively
    Orientation="Horizontal" or
    Orientation="Vertical"
  • code-behind
    RadSlider1.Orentation = Telerik.Web.UI.Orientation.Vertical; or
    RadSlider1.Orentation = Telerik.Web.UI.Orientation.Horizontal;
  • client-side
    RadSlider1.set_orientation(Telerik.Web.UI.Orientation.Horizontal);
    RadSlider1.redraw(); or
    RadSlider1.set_orientation(Telerik.Web.UI.Orientation.Vertical);
    RadSlider1.redraw();
  • DefaultCS.aspx
<%@ Page Language="c#" AutoEventWireup="false"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin">
        <strong>Horizontal slider (default)</strong><br />
        <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider1" runat="server" Value="50">
        </telerik:RadSlider>
        <br />
        <strong>Vertical slider (Orientation="Vertical")</strong><br />
        <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider3" runat="server" Value="50" Orientation="Vertical">
        </telerik:RadSlider>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance