Slider - Reversed Direction

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The IsDirectionReversed property of the RadSlider by default is set to false. If you set it to true the MinimumValue and MaximumValue of the slider will switch their positions.

In the example above, we have set IsDirectionReversed=true for the thermometer slider in order to mimic the look and feel of a real thermometer.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</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-wide no-bg">
        <div class="slideshowviewer">
            <div class="climate">
            </div>
            <div class="months">
                <telerik:RadSlider RenderMode="Lightweight" ID="MonthsSlider" runat="server" Orientation="Vertical" Height="417px"
                    Width="100px" CssClass="monthsSlider" ItemType="Item" TrackPosition="TopLeft"
                    Value="5" OnClientValueChanged="demo.monthChanged" Skin="Office2007">
                    <Items>
                        <telerik:RadSliderItem Text="January" Value="-2"></telerik:RadSliderItem>
                        <telerik:RadSliderItem Text="February" Value="2"></telerik:RadSliderItem>
                        <telerik:RadSliderItem Text="March" Value="5"></telerik:RadSliderItem>
                        <telerik:RadSliderItem Text="April" Value="10"></telerik:RadSliderItem>
                        <telerik:RadSliderItem Text="May" Value="14"></telerik:RadSliderItem>
                        <telerik:RadSliderItem Text="June" Value="17"></telerik:RadSliderItem>
                        <telerik:RadSliderItem Text="July" Value="20"></telerik:RadSliderItem>
                        <telerik:RadSliderItem Text="August" Value="20"></telerik:RadSliderItem>
                        <telerik:RadSliderItem Text="September" Value="18"></telerik:RadSliderItem>
                        <telerik:RadSliderItem Text="October" Value="13"></telerik:RadSliderItem>
                        <telerik:RadSliderItem Text="November" Value="4"></telerik:RadSliderItem>
                        <telerik:RadSliderItem Text="December" Value="0"></telerik:RadSliderItem>
                    </Items>
                </telerik:RadSlider>
            </div>
            <div class="thermometer">
                <telerik:RadSlider RenderMode="Lightweight" Skin="Vista" ID="ThermometerSlider" runat="server" OnClientLoad="demo.thermometerSliderLoad"
                    ItemType="Tick" MinimumValue="-10" MaximumValue="40" LargeChange="10" Orientation="Vertical"
                    Height="288px" Width="60px" ShowDragHandle="false" ShowDecreaseHandle="false"
                    ShowIncreaseHandle="false" IsDirectionReversed="true" Value="17" Enabled="false"
                    CssClass="thermometerSlider">
                </telerik:RadSlider>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?