Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Slider / First Look

Settings
Choose RadSlider orientation:
RadSlider direction:
Choose Track Position:
Set the number of dragHandles:
Enable/Disable server-side rendering:
Choose thumbs interaction mode:
Enable/Disable RadSlider:

  • Telerik RadSlider


    Telerik RadSlider is a flexible UI component that allows users to select a value or a range of values from a defined range using a smooth or step-based slider. The control is completely customizable in terms of appearance and offers numerous configuration options like orientation, click offset, mouse wheel support, etc.

    Key Features:

    • Horizontal/Vertical Orientation - depending on your needs, RadSlider can be displayed horizontally or vertically on the page by setting the Orientation property.
    • Direction - you can configure the RadSlider to reverse its standard direction using its IsDirectionReversed property.
    • RadSlider items - You can specify the type of items with which the RadSlider works using its ItemType property. The possible values are None, Tick and Item.
    • Range slider - The RadSlider can display one or two dragHandles thus providing you with the ability to select a single value or a range of values from a defined range.
    • Decrease/Increase/Drag Handles - The slider layout can be customized using one of the handle properties that control which slider handles will be displayed - Increase Handle, Decrease Handle or Drag Handle.
    • Slider Animation - you can create smooth slide animations to a specified point without any browser interference. The animation duration is defined in milliseconds.
    • MouseWheel Support - grabbing and dragging can be annoying at times, so that's why mouse wheel support could be a very nice alternative. When users move the mouse wheel over the slider, its default value the will change. That value will increase/decrease with one SmallChange, which is again configurable. The MouseWheel support is available only of the one dragHanle mode of the RadSlider, that is, when IsSelectionRangeEnabled property is set to "false".
    • LargeChange - you can define the change in value of the distance, at which the slider will jump slider when the user clicks on the track. In its default mode, the slider will automatically scroll to the value which has been clicked by the user.
    • View-Only Mode - in some cases you might need to simply display the slider as disabled, and prohibit changes in its value.
    • Advanced Skinning - The visual appearance of RadSlider can be easily customized through skins. You can use one of the predefined skins or create your own.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Slider.Default.DefaultCS"
        CodeFile="DefaultCS.aspx.cs" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
        .sliderView
        {
            width:435px;
        }
        
        .horizontalSliderView .RadSlider
        {
            margin-top:70px;
            margin-left:30px;
        }
        
        .horizontalSliderView .ItemsSlider
        {
            margin-top:10px;
        }
        
        .horizontalSliderView .TicksSlider
        {
            margin-top:60px;
        }
        
        .verticalSliderView .RadSlider
        {
            float:left;
            margin-left:65px;
            margin-top:0px;
        }
        
        .verticalSliderView .TicksSlider
        {
            margin-left:45px;
        }
        
        /* IE6 */
        * html .verticalSliderView .RadSlider
        {
            margin-left:45px;
        }
        </style>
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All">
            </telerik:RadFormDecorator>
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <td style="vertical-align: top;">
                        <asp:Panel ID="RadSliders_Wrapper" runat="server" CssClass="sliderView horizontalSliderView">
                            <telerik:RadSlider ID="RadSlider_Items" runat="server" ItemType="item" Width="350px"
                                Height="70px" AnimationDuration="400" CssClass="ItemsSlider" ThumbsInteractionMode="Free">
                                <Items>
                                    <telerik:RadSliderItem Text="Jan" Value="1" />
                                    <telerik:RadSliderItem Text="Feb" Value="2" />
                                    <telerik:RadSliderItem Text="Mar" Value="3" />
                                    <telerik:RadSliderItem Text="Apr" Value="4" />
                                    <telerik:RadSliderItem Text="May" Value="5" />
                                    <telerik:RadSliderItem Text="Jun" Value="6" />
                                    <telerik:RadSliderItem Text="Jul" Value="7" />
                                    <telerik:RadSliderItem Text="Aug" Value="8" />
                                    <telerik:RadSliderItem Text="Sep" Value="9" />
                                    <telerik:RadSliderItem Text="Oct" Value="10" />
                                    <telerik:RadSliderItem Text="Nov" Value="11" />
                                    <telerik:RadSliderItem Text="Dec" Value="12" />
                                </Items>
                            </telerik:RadSlider>
                            <telerik:RadSlider ID="RadSlider_Ticks" runat="server" MinimumValue="0" MaximumValue="100"
                                SmallChange="5" LargeChange="10" ItemType="tick" Height="70px" Width="350px"
                                AnimationDuration="400" CssClass="TicksSlider" ThumbsInteractionMode="Free">
                            </telerik:RadSlider>
                            <telerik:RadSlider ID="RadSlider_NoItems" runat="server" Height="70px" Width="350px"
                                AnimationDuration="400" ThumbsInteractionMode="Free">
                            </telerik:RadSlider>
                        </asp:Panel>
                    </td>
                    <td style="padding: 0 0 0 8px; vertical-align: top;">
                        <fieldset title="Settings" style="width: 300px;">
                            <legend>Settings</legend>
                            <div style="padding: 8px;">
                                <strong>Choose RadSlider orientation:</strong>
    <asp:RadioButtonList RepeatDirection="Horizontal" CellPadding="0" CellSpacing="0"
    CssClass="text" ID="CheckBoxListOrienation" runat="server" AutoPostBack="True"
    OnSelectedIndexChanged="CheckBoxListOrienation_SelectedIndexChanged">
                                    <asp:ListItem Value="Horizontal" Selected="True">Horizontal</asp:ListItem>
                                    <asp:ListItem Value="Vertical">Vertical</asp:ListItem>
                                </asp:RadioButtonList>
                            </div>
                            <div style="padding: 8px;">
                                <strong>RadSlider direction:</strong>
    <asp:RadioButtonList ID="RadioButtonListReverse" runat="server" AutoPostBack="true"
    RepeatDirection="Horizontal" CssClass="text" CellPadding="0" CellSpacing="0"
    OnSelectedIndexChanged="RadioButtonListReverse_SelectedIndexChanged">
                                    <asp:ListItem Value="Standard" Selected="true">Standard</asp:ListItem>
                                    <asp:ListItem Value="Reverse">Reverse</asp:ListItem>
                                </asp:RadioButtonList>
                            </div>
                            <div style="padding: 8px">
                                <div style="padding: 0 4px 8px 0; font-weight: bold;">
                                    Choose Track Position:</div>
    <asp:RadioButtonList ID="ChooseTrackPosition" runat="server" AutoPostBack="true"
    RepeatDirection="Vertical" CssClass="text" CellPadding="0" CellSpacing="0" OnSelectedIndexChanged="ChooseTrackPosition_SelectedIndexChanged">
                                    <asp:ListItem Value="Center" Selected="true">Center</asp:ListItem>
                                    <asp:ListItem Value="TopLeft">TopLeft</asp:ListItem>
                                    <asp:ListItem Value="BottomRight">BottomRight</asp:ListItem>
                                </asp:RadioButtonList>
                            </div>
                            <div style="padding: 8px;">
                                <strong>Set the number of dragHandles:</strong>
    <asp:RadioButtonList ID="RadioButtonListRange" runat="server" AutoPostBack="true"
    RepeatDirection="Horizontal" CssClass="text" CellPadding="0" CellSpacing="0"
    OnSelectedIndexChanged="RadioButtonListRange_SelectedIndexChanged">
                                    <asp:ListItem Value="One" Selected="true">One</asp:ListItem>
                                    <asp:ListItem Value="Two">Two</asp:ListItem>
                                </asp:RadioButtonList>
                            </div>
                            <div style="padding: 8px;">
                                <strong>Enable/Disable server-side rendering:</strong>
    <asp:RadioButtonList ID="RadioButtonListRendering" runat="server" AutoPostBack="true"
    RepeatDirection="Horizontal" CssClass="text" CellPadding="0" CellSpacing="0"
    OnSelectedIndexChanged="RadioButtonListRendering_SelectedIndexChanged">
                                    <asp:ListItem Value="Enable">Enable</asp:ListItem>
                                    <asp:ListItem Value="Disable" Selected="true">Disable</asp:ListItem>
                                </asp:RadioButtonList>
                            </div>
                            <div style="padding: 8px">
                                <div style="padding: 0 4px 8px 0; font-weight: bold;">
                                    Choose thumbs interaction mode:</div>
    <asp:RadioButtonList ID="ChooseThumbsInteractionMode" runat="server" AutoPostBack="true"
    RepeatDirection="Vertical" CssClass="text" CellPadding="0" CellSpacing="0" OnSelectedIndexChanged="ChooseThumbsInteractionMode_SelectedIndexChanged">
                                    <asp:ListItem Value="Free" Selected="true">Free</asp:ListItem>
                                    <asp:ListItem Value="Lock">Lock</asp:ListItem>
                                    <asp:ListItem Value="Push">Push</asp:ListItem>
                                </asp:RadioButtonList>
                            </div>
                            <div style="padding: 8px;">
                                <strong>Enable/Disable RadSlider:</strong>
    <asp:RadioButtonList ID="RadioButtonListEnabled" runat="server" AutoPostBack="true"
    RepeatDirection="Horizontal" CssClass="text" CellPadding="0" CellSpacing="0"
    OnSelectedIndexChanged="RadioButtonListEnabled_SelectedIndexChanged">
                                    <asp:ListItem Value="Enable" Selected="true">Enable</asp:ListItem>
                                    <asp:ListItem Value="Disable">Disable</asp:ListItem>
                                </asp:RadioButtonList>
                            </div>
                        </fieldset>
                    </td>
                </tr>
            </table>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="ChooseTrackPosition">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadSliders_Wrapper" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="ChooseTrackPosition" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="CheckBoxListOrienation">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadSliders_Wrapper" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="CheckBoxListOrienation" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadioButtonListRange">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadSliders_Wrapper" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="RadioButtonListRange" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadioButtonListReverse">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadSliders_Wrapper" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="RadioButtonListReverse" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="ChooseThumbsInteractionMode">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadSliders_Wrapper" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="ChooseThumbsInteractionMode" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadioButtonListEnabled">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadSliders_Wrapper" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="RadioButtonListEnabled" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451