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 / Server-side API


Configure slider:
Value/SelectionStart: SelectionEnd:
Width (px): Height (px):
MinimumValue: MaximumValue:
SmallChange: LargeChange:
AnimationDuration:
Orientation:
TrackPosition:
ItemType:
Enabled: TrackMouseWheel:
ShowDragHandle: LiveDrag:
ShowDecreaseHandle: ShowIncreaseHandle:
IsSelectionRangeEnabled: IsDirectionReversed:
EnableDragRange:
Preview:

  • Server-Side API

    It is easy to configure a RadSlider control at runtime by changing the values of its server properties.

    This example demonstrates how you can use the following properties:

    • Orientation - The Orientation property defines how the slider will be displayed in the page - vertically or horizontally.
    • SmallChange - Using the SmallChange property, you can create a "discrete" slider which will change its value in the defined steps.
    • LargeChange - Using the LargeChange property, you can define what should be the change in the value of the slider when the user clicks on the track.
    • AnimationDuration - The AnimationDuration property defines how long (in milliseconds) the animation of the sliding will run.
    • Enabled - Enables or disables the RadSlider control.
    • TrackMouseWheel - Using the TrackMouseWheel property, you can define if the value of the slider should be changed when the user is using the mousewheel over the track.
    • LiveDrag - The LiveDrag property defines when the value of the RadSlider changes - while you drag the dragHandle or when you release the dragHandle.
    • IsDirectionReversed - The IsDirectionReversed property defines the position of the MinimumValue and MaximumValue.
    • Width - The Width property defines the width of the RadSlider control.
    • Height - The Height property defines the height of the RadSlider control.
    • Value - Using the Value property, you can set the initial value of the slider.
    • SelectionStart - Using the SelectionStart property, you can set the first value of the slider in case IsSelectionRangeEnabled property is set to true.
    • SelectionEnd - Using the SelectionEnd property, you can set the second value of the slider in case IsSelectionRangeEnabled property is set to true.
    • MinimumValue - The MinimumValue property defines the smallest possible value of the RadSlider.
    • MaximumValue - The MaximumValue property defines the largest possible value of the RadSlider.
    • TrackPosition - The TrackPosition property defines the position of the track element in the RadSlider.
    • ItemType - The ItemType property defines the type of the slider items - Tick, Item or None.
    • ShowDragHandle - Using the ShowDragHandle property, you can configure the RadSlider not to display dragHandle(s).
    • ShowDecreaseHandle - Using the ShowDecreaseHandle property, you can configure the RadSlider not to display a decrease handle.
    • ShowIncreaseHandle - Using the ShowIncreaseHandle property, you can configure the RadSlider not to display an increase handle.
    • IsSelectionRangeEnabled - The IsSelectionRangeEnabled property defines whether the RadSlider should display one or two dragHandles.
    • EnableDragRange - Using the EnableDragRange property, you can specify whether the user can change both the SelectionStart and the SelectionEnd properties of the slider by dragging the selected region element.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Slider.ServerSideAPI.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">
        #_rfdSkinnedConfigureSlider
        {
            float:right;
        }
        </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" />
            <div class="module" style="width: 415px; float: left; padding: 0 0 0 10px;">
                <table id="ToolTipConfigurator" style="width: 405px; height: 490px; border: 0px;"
                    runat="server">
                    <tr>
                        <td colspan="4" style="height: 49px;">
                            <br />
                            <strong>Configure slider:</strong><br />
                            <hr />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblValue" runat="server" Text="Value/SelectionStart:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:TextBox ID="RadSlider1_Value" runat="server" Style="width: 40px"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator_Value" runat="server" ControlToValidate="RadSlider1_Value"
    Type="Integer" Operator="DataTypeCheck" ErrorMessage="!" Display="Dynamic">
                            </asp:CompareValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator_Value" runat="server" ControlToValidate="RadSlider1_Value"
    ErrorMessage="*" Display="Dynamic">
                            </asp:RequiredFieldValidator>
                        </td>
                        <td id="selectionEndLabelCell">
                            <asp:Label ID="lblSelectionEnd" runat="server" Text="SelectionEnd:"></asp:Label></td>
                        <td id="selectionEndTextBoxCell" style="width: 60px">
                            <asp:TextBox ID="RadSlider1_SelectionEnd" runat="server" Style="width: 40px"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator_SelectionEnd" runat="server" ControlToValidate="RadSlider1_SelectionEnd"
    Type="Integer" Operator="DataTypeCheck" ErrorMessage="!" Display="Dynamic">
                            </asp:CompareValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="RadSlider1_SelectionEnd"
    ErrorMessage="*" Display="Dynamic">
                            </asp:RequiredFieldValidator></td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblWidth" runat="server" Text="Width (px):"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:TextBox ID="RadSlider1_Width" runat="server" Style="width: 40px"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator_Width" runat="server" ControlToValidate="RadSlider1_Width"
    Type="Integer" Operator="DataTypeCheck" ErrorMessage="!" Display="Dynamic">
                            </asp:CompareValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="RadSlider1_Width"
    ErrorMessage="*" Display="Dynamic">
                            </asp:RequiredFieldValidator></td>
                        <td>
                            <asp:Label ID="lblHeight" runat="server" Text="Height (px):"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:TextBox ID="RadSlider1_Height" runat="server" Style="width: 40px"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator_Height" runat="server" ControlToValidate="RadSlider1_Height"
    Type="Integer" Operator="DataTypeCheck" ErrorMessage="!" Display="Dynamic">
                            </asp:CompareValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="RadSlider1_Height"
    ErrorMessage="*" Display="Dynamic">
                            </asp:RequiredFieldValidator></td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblMinimumValue" runat="server" Text="MinimumValue:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:TextBox ID="RadSlider1_Minimum" runat="server" Style="width: 40px"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator_Minimum" runat="server" ControlToValidate="RadSlider1_Minimum"
    Type="Integer" Operator="DataTypeCheck" ErrorMessage="!" Display="Dynamic">
                            </asp:CompareValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="RadSlider1_Minimum"
    ErrorMessage="*" Display="Dynamic">
                            </asp:RequiredFieldValidator></td>
                        <td>
                            <asp:Label ID="lblMaximumValue" runat="server" Text="MaximumValue:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:TextBox ID="RadSlider1_Maximum" runat="server" Style="width: 40px"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator_Maximum" runat="server" ControlToValidate="RadSlider1_Maximum"
    Type="Integer" Operator="DataTypeCheck" ErrorMessage="!" Display="Dynamic">
                            </asp:CompareValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="RadSlider1_Maximum"
    ErrorMessage="*" Display="Dynamic">
                            </asp:RequiredFieldValidator></td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblSmallChange" runat="server" Text="SmallChange:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:TextBox ID="RadSlider1_SmallChange" runat="server" Style="width: 40px"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator_SmallChange" runat="server" ControlToValidate="RadSlider1_SmallChange"
    Type="Integer" Operator="DataTypeCheck" ErrorMessage="!" Display="Dynamic">
                            </asp:CompareValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="RadSlider1_SmallChange"
    ErrorMessage="*" Display="Dynamic">
                            </asp:RequiredFieldValidator></td>
                        <td>
                            <asp:Label ID="lblLargeChange" runat="server" Text="LargeChange:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:TextBox ID="RadSlider1_LargeChange" runat="server" Style="width: 40px"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator_LargeChange" runat="server" ControlToValidate="RadSlider1_LargeChange"
    Type="Integer" Operator="DataTypeCheck" ErrorMessage="!" Display="Dynamic">
                            </asp:CompareValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="RadSlider1_LargeChange"
    ErrorMessage="*" Display="Dynamic">
                            </asp:RequiredFieldValidator></td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblAnimationDuration" runat="server" Text="AnimationDuration:"></asp:Label></td>
                        <td style="width: 100%" colspan="3">
                            <asp:TextBox ID="RadSlider1_AnimationDuration" runat="server" Style="width: 40px"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator_AnimationDuration" runat="server" ControlToValidate="RadSlider1_AnimationDuration"
    Type="Integer" Operator="DataTypeCheck" ErrorMessage="!" Display="Dynamic">
                            </asp:CompareValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="RadSlider1_AnimationDuration"
    ErrorMessage="*" Display="Dynamic">
                            </asp:RequiredFieldValidator></td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblOrientation" runat="server" Text="Orientation:"></asp:Label></td>
                        <td style="width: 100%" colspan="3">
                            <telerik:RadSlider ID="RadSlider1_Orientation" runat="server" ItemType="Item" TrackPosition="BottomRight"
                                Height="35px" Width="250px">
                                <Items>
                                    <telerik:RadSliderItem Text="Horizontal" Value="Horizontal" />
                                    <telerik:RadSliderItem Text="Vertical" Value="Vertical" />
                                </Items>
                            </telerik:RadSlider>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblTrackPosition" runat="server" Text="TrackPosition:"></asp:Label></td>
                        <td style="width: 100%" colspan="3">
                            <telerik:RadSlider ID="RadSlider1_TrackPosition" runat="server" ItemType="Item" TrackPosition="BottomRight"
                                Height="35px" Width="250px">
                                <Items>
                                    <telerik:RadSliderItem Text="BottomRight" Value="BottomRight" />
                                    <telerik:RadSliderItem Text="Center" Value="Center" />
                                    <telerik:RadSliderItem Text="TopLeft" Value="TopLeft" />
                                </Items>
                            </telerik:RadSlider>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblItemType" runat="server" Text="ItemType:"></asp:Label></td>
                        <td style="width: 100%" colspan="3">
                            <telerik:RadSlider ID="RadSlider1_ItemType" runat="server" ItemType="Item" TrackPosition="BottomRight"
                                Height="35px" Width="250px" OnClientLoad="DisplayItemsCountCell" OnClientValueChanged="DisplayItemsCountCell">
                                <Items>
                                    <telerik:RadSliderItem Text="None" Value="None" />
                                    <telerik:RadSliderItem Text="Item" Value="Item" />
                                    <telerik:RadSliderItem Text="Tick" Value="Tick" />
                                </Items>
                            </telerik:RadSlider>

                            <script type="text/javascript">
                            function DisplayItemsCountCell(sender, args)
                            {
                                var itemsCountCell = $get('itemsCountCell');
                                itemsCountCell.style.visibility = (sender.get_selectedItem().get_value() == "Item") ? "" : "hidden";
                            }
                            </script>

                        </td>
                    </tr>
                    <tr id="itemsCountCell" style="visibility: hidden;">
                        <td>
                            <asp:Label ID="lblNumberOfItems" runat="server" Text="Number of items:"></asp:Label></td>
                        <td style="width: 100%" colspan="3">
                            <telerik:RadSlider ID="RadSlider1_ItemsCount" runat="server" ItemType="Item" TrackPosition="BottomRight"
                                Height="35px" Width="250px">
                                <Items>
                                    <telerik:RadSliderItem Text="3" Value="3" />
                                    <telerik:RadSliderItem Text="5" Value="5" />
                                    <telerik:RadSliderItem Text="10" Value="10" />
                                </Items>
                            </telerik:RadSlider>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblEnabled" runat="server" Text="Enabled:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:CheckBox ID="RadSlider1_Enabled" runat="server" />
                        </td>
                        <td>
                            <asp:Label ID="lblTrackMouseWheel" runat="server" Text="TrackMouseWheel:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:CheckBox ID="RadSlider1_TrackMouseWheel" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblShowDragHandle" runat="server" Text="ShowDragHandle:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:CheckBox ID="RadSlider1_ShowDragHandle" runat="server" />
                        </td>
                        <td>
                            <asp:Label ID="lblLiveDrag" runat="server" Text="LiveDrag:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:CheckBox ID="RadSlider1_LiveDrag" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblShowDecreaseHandle" runat="server" Text="ShowDecreaseHandle:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:CheckBox ID="RadSlider1_ShowDecreaseHandle" runat="server" />
                        </td>
                        <td>
                            <asp:Label ID="lblShowIncreaseHandle" runat="server" Text="ShowIncreaseHandle:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:CheckBox ID="RadSlider1_ShowIncreaseHandle" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblIsSelectionRangeEnabled" runat="server" Text="IsSelectionRangeEnabled:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:CheckBox ID="RadSlider1_IsSelectionRangeEnabled" runat="server" onclick="DisplaySelectionEndCell(this);" />

                            <script type="text/javascript">
                            function DisplaySelectionEndCell(checkBox)
                            {
                                var labelCell = $get("selectionEndLabelCell");
                                var textBoxCell = $get("selectionEndTextBoxCell");
                                
                                labelCell.style.visibility = (checkBox.checked) ? "" : "hidden";
                                textBoxCell.style.visibility = (checkBox.checked) ? "" : "hidden";
                            }
                            </script>

                        </td>
                        <td>
                            <asp:Label ID="lblIsDirectionReversed" runat="server" Text="IsDirectionReversed:"></asp:Label></td>
                        <td style="width: 60px">
                            <asp:CheckBox ID="RadSlider1_IsDirectionReversed" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblEnableDragRange" runat="server" Text="EnableDragRange:"></asp:Label></td>
                        <td colspan="3">
                            <asp:CheckBox ID="RadSlider1_EnableDragRange" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="height: 37px;">
                            <asp:Button ID="ConfigureSlider" runat="server" OnClick="ConfigureSlider_Click" Text="Configure Slider" />
                        </td>
                    </tr>
                </table>
            </div>
            <div style="padding: 0px 39px; float: left; margin-bottom: 30px; width: 240px; height: 490px;
                overflow: auto; position: relative; border: #c6e1f2 1px solid;">
                <div style="padding-top: 20px;">
                    <strong>Preview:</strong><br />
                    <hr />
                </div>
                <telerik:RadSlider runat="server" ID="RadSlider1" Orientation="Vertical" Width="70px"
                    ItemType="tick" SmallChange="5" LargeChange="10" IsSelectionRangeEnabled="true"
                    SelectionStart="10" SelectionEnd="50" OnClientLoad="SliderLoad" />

                <script type="text/javascript">
                // Set the real value/selectionStart and selectionEnd in the bextBoxes as it might be incorrect - e.g. in case the user
                // sets MinimumValue for the slider control that is larger than the Value/SelectionStart.
                function SliderLoad(sender, args)
                {
                    $get("RadSlider1_Value").value = (sender.get_isSelectionRangeEnabled())
         ? sender.get_selectionStart()
         : sender.get_value();
         $get("RadSlider1_SelectionEnd").value = sender.get_selectionEnd();
                }
                </script>

            </div>
            <div style="clear: both; height: 1px; margin-bottom: -1px;">
                <!-- -->
            </div>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="ConfigureSlider">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadSlider1" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="RadSlider1_Width" UpdatePanelRenderMode="Inline" />
                            <telerik:AjaxUpdatedControl ControlID="RadSlider1_Height" UpdatePanelRenderMode="Inline" />
                        </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