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

Reversed Direction

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

Support & Learning Resources

Find Assistance