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


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

  • Client-Side API

    RadSlider provides a flexible client-side API allowing you to change all exposed properties, as well as instantiate a RadSlider control directly on the client.

    See the help section which describes how to use the client-side API in details.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Slider.ClientSideAPI.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" />
    </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" />
        <script type="text/javascript">
            //<![CDATA[
            function HandleValueChanged(sender,eventArgs)
            {
                $get("RadSlider1_Value").value = (sender.get_isSelectionRangeEnabled())
                                                    ? sender.get_selectionStart()
                                                    : sender.get_value();
                $get("RadSlider1_SelectionEnd").value = sender.get_selectionEnd();
            }

            function GetSlider()
            {
                return $find("<%= RadSlider1.ClientID %>");
            }

            function SetOrientation(sender,args)
            {
                var slider = GetSlider();

                var toHorizontal = (sender.get_selectedItem().get_value() == 'Horizontal');
                var newOrientation = toHorizontal ? Telerik.Web.UI.Orientation.Horizontal : Telerik.Web.UI.Orientation.Vertical;
                var width = parseInt(slider.get_width());
                var height = parseInt(slider.get_height());

                // Switch the width and height if necessary.
                if ((toHorizontal && (width < height)) || (!toHorizontal && (height < width)))
                {
                    slider.set_width(height);
                    $get("RadSlider1_Width").value = height;

                    slider.set_height(width);
                    $get("RadSlider1_Height").value = width;
                }

                slider.set_orientation(newOrientation);
            }

            function SetTrackPosition(sender,args)
            {
                var selectValue = sender.get_selectedItem().get_value();
                var newTrackPosition = Telerik.Web.UI.SliderTrackPosition.Center;
                if (selectValue == 'TopLeft')
                {
                    newTrackPosition = Telerik.Web.UI.SliderTrackPosition.TopLeft;
                }
                else if (selectValue == 'BottomRight')
                {
                    newTrackPosition = Telerik.Web.UI.SliderTrackPosition.BottomRight;
                }

                var slider = GetSlider();
                slider.set_trackPosition(newTrackPosition);
            }

            function SetWidth()
            {
                var value = parseInt($get("RadSlider1_Width").value);
                if (isNaN(value)) return;

                var slider = GetSlider();
                slider.set_width(value);
            }

            function SetHeight()
            {
                var value = parseInt($get("RadSlider1_Height").value);
                if (isNaN(value)) return;

                var slider = GetSlider();
                slider.set_height(value);
            }

            function SetValue()
            {
                var slider = GetSlider();
                var newValue = $get("RadSlider1_Value").value;
                if (slider.get_isSelectionRangeEnabled())
                {
                    slider.set_selectionStart(newValue);
                }
                else
                {
                    slider.set_value(newValue);
                }
            }

            function SetSelectionEnd()
            {
                var slider = GetSlider();
                slider.set_selectionEnd($get("RadSlider1_SelectionEnd").value);
            }

            function ToggleDragHandleVisible()
            {
                var slider = GetSlider();
                slider.set_showDragHandle(!slider.get_showDragHandle());
            }

            function ToggleDecreaseHandleVisible()
            {
                var slider = GetSlider();
                slider.set_showDecreaseHandle(!slider.get_showDecreaseHandle());
            }

            function ToggleIncreaseHandleVisible()
            {
                var slider = GetSlider();
                slider.set_showIncreaseHandle(!slider.get_showIncreaseHandle());
            }

            function ToggleEnabled()
            {
                var slider = GetSlider();
                slider.set_enabled(!slider.get_enabled());
            }

            function ToggleTrackMouseWheel()
            {
                var slider = GetSlider();
                slider.set_trackMouseWheel(!slider.get_trackMouseWheel());
            }

            function ToggleIsSelectionRangeEnabled()
            {
                var slider = GetSlider();
                slider.set_isSelectionRangeEnabled(!slider.get_isSelectionRangeEnabled());

                // The selectionStart value might change when you change the IsSelectionRangeEnabled property.
                HandleValueChanged(slider);

                var selectionEndCell = $get('selectionEndCell');
                if (slider.get_isSelectionRangeEnabled())
                {
                    selectionEndCell.style.visibility = '';
                }
                else
                {
                    selectionEndCell.style.visibility = 'hidden';
                }
            }

            function SetSmallChange()
            {
                var value = $get("RadSlider1_SmallChange").value;

                var slider = GetSlider();
                slider.set_smallChange(value);
            }

            function SetLargeChange()
            {
                var value = $get("RadSlider1_LargeChange").value;

                var slider = GetSlider();
                slider.set_largeChange(value);
            }

            function ToggleIsDirectionReversed()
            {
                var slider = GetSlider();
                slider.set_isDirectionReversed(!slider.get_isDirectionReversed());

                // The selectionStart value might change when you change the IsDirectionReversed property,
                // e.g. when IsSelectionRangeEnabled=true.
                HandleValueChanged(slider);
            }

            function ToggleEnableDragRange()
            {
                var slider = GetSlider();
                slider.set_enableDragRange(!slider.get_enableDragRange());
            }

            function ToggleLiveDrag()
            {
                var slider = GetSlider();
                slider.set_liveDrag(!slider.get_liveDrag());
            }

            function SetMinimumValue()
            {
                var value = $get("RadSlider1_Minimum").value;

                var slider = GetSlider();
                slider.set_minimumValue(value);

                // The selectionStart value might change when you change the MinimumValue property,
                // e.g. when minimumValue becomes larger than selectionStart.
                HandleValueChanged(slider);
            }

            function SetMaximumValue()
            {
                var value = $get("RadSlider1_Maximum").value;

                var slider = GetSlider();
                slider.set_maximumValue(value);

                // The selectionEnd value might change when you change the MaximumValue property,
                // e.g. when MaximumValue becomes smaller than selectionEnd.
                HandleValueChanged(slider);
            }

            function SetAnimationDuration()
            {
                var value = parseInt($get("RadSlider1_AnimationDuration").value);
                if (isNaN(value)) return;

                var slider = GetSlider();
                slider.set_animationDuration(value);
            }
            //]]>
        </script>
        <div class="module" style="width: 415px; float: left; padding: 0 0 5px 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 colspan="3">
                        <asp:TextBox ID="RadSlider1_Value" runat="server" Style="width: 40px"></asp:TextBox>&nbsp;
    <asp:Button ID="btnValue" runat="server" OnClientClick="SetValue();return false;"
    Text="Set" />
                    </td>
                </tr>
                <tr id="selectionEndCell">
                    <td>
                        <asp:Label ID="lblSelectionEnd" runat="server" Text="SelectionEnd:"></asp:Label>
                    </td>
                    <td colspan="3">
                        <asp:TextBox ID="RadSlider1_SelectionEnd" runat="server" Style="width: 40px"></asp:TextBox>&nbsp;
    <asp:Button ID="btnSelectionEnd" runat="server" OnClientClick="SetSelectionEnd();return false;"
    Text="Set" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblWidth" runat="server" Text="Width (px):"></asp:Label>
                    </td>
                    <td colspan="3">
                        <asp:TextBox ID="RadSlider1_Width" runat="server" Style="width: 40px"></asp:TextBox>&nbsp;
    <asp:Button ID="btnWidth" runat="server" OnClientClick="SetWidth();return false;"
    Text="Set" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblHeight" runat="server" Text="Height (px):"></asp:Label>
                    </td>
                    <td colspan="3">
                        <asp:TextBox ID="RadSlider1_Height" runat="server" Style="width: 40px"></asp:TextBox>&nbsp;
    <asp:Button ID="btnHeight" runat="server" OnClientClick="SetHeight();return false;"
    Text="Set" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblMinimumValue" runat="server" Text="MinimumValue:"></asp:Label>
                    </td>
                    <td colspan="3">
                        <asp:TextBox ID="RadSlider1_Minimum" runat="server" Style="width: 40px"></asp:TextBox>&nbsp;
    <asp:Button ID="btnMinimumValue" runat="server" OnClientClick="SetMinimumValue();return false;"
    Text="Set" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblMaximumValue" runat="server" Text="MaximumValue:"></asp:Label>
                    </td>
                    <td colspan="3">
                        <asp:TextBox ID="RadSlider1_Maximum" runat="server" Style="width: 40px"></asp:TextBox>&nbsp;
    <asp:Button ID="btnMaximumValue" runat="server" OnClientClick="SetMaximumValue();return false;"
    Text="Set" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblAnimationDuration" runat="server" Text="AnimationDuration:"></asp:Label>
                    </td>
                    <td colspan="3">
                        <asp:TextBox ID="RadSlider1_AnimationDuration" runat="server" Style="width: 40px"></asp:TextBox>&nbsp;
    <asp:Button ID="btnAnimationDuration" runat="server" OnClientClick="SetAnimationDuration();return false;"
    Text="Set" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblSmallChange" runat="server" Text="SmallChange:"></asp:Label>
                    </td>
                    <td colspan="3">
                        <asp:TextBox ID="RadSlider1_SmallChange" runat="server" Style="width: 40px"></asp:TextBox>&nbsp;
    <asp:Button ID="btnSmallChange" runat="server" OnClientClick="SetSmallChange();return false;"
    Text="Set" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblLargeChange" runat="server" Text="LargeChange:"></asp:Label>
                    </td>
                    <td colspan="3">
                        <asp:TextBox ID="RadSlider1_LargeChange" runat="server" Style="width: 40px"></asp:TextBox>&nbsp;
    <asp:Button ID="btnLargeChange" runat="server" OnClientClick="SetLargeChange();return false;"
    Text="Set" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblOrientation" runat="server" Text="Orientation:"></asp:Label>
                    </td>
                    <td colspan="3">
                        <telerik:RadSlider ID="RadSlider1_Orientation" runat="server" ItemType="Item" TrackPosition="BottomRight"
                            Height="35px" Width="250px" OnClientValueChanged="SetOrientation" LiveDrag="false">
                            <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 colspan="3">
                        <telerik:RadSlider ID="RadSlider1_TrackPosition" runat="server" ItemType="Item" TrackPosition="BottomRight"
                            Height="35px" Width="250px" OnClientValueChanged="SetTrackPosition" LiveDrag="false">
                            <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="lblEnabled" runat="server" Text="Enabled:"></asp:Label>
                    </td>
                    <td style="width: 30px;">
                        <asp:CheckBox ID="RadSlider1_Enabled" runat="server" onclick="ToggleEnabled();" />
                    </td>
                    <td>
                        <asp:Label ID="lblTrackMouseWheel" runat="server" Text="TrackMouseWheel:"></asp:Label>
                    </td>
                    <td style="width: 30px;">
                        <asp:CheckBox ID="RadSlider1_TrackMouseWheel" runat="server" onclick="ToggleTrackMouseWheel();" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblShowDragHandle" runat="server" Text="ShowDragHandle:"></asp:Label>
                    </td>
                    <td style="width: 30px;">
                        <asp:CheckBox ID="RadSlider1_ShowDragHandle" runat="server" onclick="ToggleDragHandleVisible();" />
                    </td>
                    <td>
                        <asp:Label ID="lblLiveDrag" runat="server" Text="LiveDrag:"></asp:Label>
                    </td>
                    <td style="width: 30px;">
                        <asp:CheckBox ID="RadSlider1_LiveDrag" runat="server" onclick="ToggleLiveDrag();" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblShowDecreaseHandle" runat="server" Text="ShowDecreaseHandle:"></asp:Label>
                    </td>
                    <td style="width: 30px;">
                        <asp:CheckBox ID="RadSlider1_ShowDecreaseHandle" runat="server" onclick="ToggleDecreaseHandleVisible();" />
                    </td>
                    <td>
                        <asp:Label ID="lblShowIncreaseHandle" runat="server" Text="ShowIncreaseHandle:"></asp:Label>
                    </td>
                    <td style="width: 30px;">
                        <asp:CheckBox ID="RadSlider1_ShowIncreaseHandle" runat="server" onclick="ToggleIncreaseHandleVisible();" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblIsSelectionRangeEnabled" runat="server" Text="IsSelectionRangeEnabled:"></asp:Label>
                    </td>
                    <td style="width: 30px;">
                        <asp:CheckBox ID="RadSlider1_IsSelectionRangeEnabled" runat="server" onclick="ToggleIsSelectionRangeEnabled();" />
                    </td>
                    <td>
                        <asp:Label ID="lblIsDirectionReversed" runat="server" Text="IsDirectionReversed:"></asp:Label>
                    </td>
                    <td style="width: 30px;">
                        <asp:CheckBox ID="RadSlider1_IsDirectionReversed" runat="server" onclick="ToggleIsDirectionReversed();" />
                    </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" onclick="ToggleEnableDragRange();" />
                    </td>
                </tr>
            </table>
        </div>
        <div style="padding: 0px 39px; float: left; margin-bottom: 30px; width: 240px; height: 495px;
            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" />
        </div>
        <div style="clear: both; height: 1px; margin-bottom: -1px;">
            <!-- -->
        </div>
        <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