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 / Drag Range

$0 $300

Information from server (after AJAX request)

SelectionStart: $50
SelectionEnd: $200
  • 0
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 100
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 200
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 300

Information from server (after AJAX request)

SelectionStart: 50
SelectionEnd: 200
Decrease
  • Very bad
  • Bad
  • Average
  • Good
  • Very Good
Increase

Information from server (after AJAX request)

SelectionStart value: Average
SelectionEnd value: Very Good

  • RadSlider Drag Range Element

    The EnableDragRange property of RadSlider specifies the behavior of the slider, when the user clicks on its selected region element. The value of this property influences the behavior of the control only in case IsSelectionRangeEnabled property is set to true.

    The possible values for EnableDragRange are:
    • false (default value) - When the user clicks on the selected region element, the dragHandle (thumb) that is closest to the point where he/she clicked, will move either with the value of LargeChange, or to the nearest to that point value, in case LargeChange is 0.
    • true - When the user clicks on the selected region element and holds the left mouse button down, he/she can drag the selected region element, thus changing both SelectionStart and SelectionEnd values.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Slider.DragRange.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">
            .dragRangeSlider .rslSelectedregion
            {
                cursor: pointer;
            }
        </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>
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Orientation="Horizontal"
            Title="Switch the value of the EnableDragRange property" Expanded="true">
            <asp:RadioButtonList ID="dblEnableDragRange" runat="server" AutoPostBack="true" OnSelectedIndexChanged="dblEnableDragRange_SelectedIndexChanged">
                <asp:ListItem Selected="True" Text="true" Value="true"></asp:ListItem>
                <asp:ListItem Selected="False" Text="false" Value="false"></asp:ListItem>
            </asp:RadioButtonList>
        </qsf:ConfiguratorPanel>
        <telerik:RadToolTip ID="RadToolTip1" runat="server" OffsetY="20" Position="TopCenter"
            ShowCallout="false" Height="20px" ShowEvent="fromcode" HideEvent="FromCode" TargetControlID="RadSlider1">
        </telerik:RadToolTip>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function OnClientValueChanged(sender, args)
                {
                    // Show the tooltip only while the slider handle is sliding. In case the user simply clicks on the track of the slider to change the value
                    // the change will be quick and the tooltip will show and hide too quickly.
                    if (!isSliding) return;

                    var tooltip = $find("<%= RadToolTip1.ClientID %>");
                    UpdateToolTipText(tooltip, sender);
                }

                var isSliding = false;
                function OnClientSlideStart(sender, args)
                {
                    isSliding = true;
                    ShowRadToolTip(sender);
                }

                function OnClientSlide(sender, args)
                {
                    var tooltip = $find("<%= RadToolTip1.ClientID %>");
                    ResetToolTipLocation(tooltip);
                }

                function OnClientSlideRangeStart(sender, args)
                {
                    isSliding = true;
                    ShowRadToolTip(sender);
                }

                function OnClientSlideRange(sender, args)
                {
                    var tooltip = $find("<%= RadToolTip1.ClientID %>");
                    ResetToolTipLocation(tooltip);
                }

                function OnClientSlideEnd(sender, args)
                {
                    isSliding = false;
                    $find("<%= RadToolTip1.ClientID %>").hide();
                }

                function OnClientSlideRangeEnd(sender, args)
                {
                    isSliding = false;
                    $find("<%= RadToolTip1.ClientID %>").hide();
                }

                function ShowRadToolTip(slider)
                {
                    var tooltip = $find("<%= RadToolTip1.ClientID %>");
                    tooltip.set_targetControl($get("RadSliderSelected_" + slider.get_id()));
                    ResetToolTipLocation(tooltip);
                    UpdateToolTipText(tooltip, slider);
                }

                function ResetToolTipLocation(tooltip)
                {
                    if (!tooltip.isVisible())
                        tooltip.show();
                    else
                        tooltip.updateLocation();
                }

                function UpdateToolTipText(tooltip, slider)
                {
                    var div = document.createElement("div");
                    div.style.whiteSpace = "nowrap";
                    if (slider.get_itemType() == Telerik.Web.UI.SliderItemType.Item)
                        div.innerHTML = (slider.get_selectedItems()[0].get_text() + " / " + slider.get_selectedItems()[1].get_text());
                    else
                        div.innerHTML = (slider.get_selectionStart() + " / " + slider.get_selectionEnd());

                    tooltip.set_contentElement(div);
                }
            </script>
        </telerik:RadCodeBlock>
        <div style="width: 450px; margin: 0 auto;">
            <table>
                <tr>
                    <td>
                        $0
                    </td>
                    <td>
                        <telerik:RadSlider runat="server" ID="RadSlider1" CssClass="dragRangeSlider" Width="400px"
                            IsSelectionRangeEnabled="true" MinimumValue="0" MaximumValue="300" SmallChange="1"
                            SelectionStart="50" SelectionEnd="200" OnClientValueChanged="OnClientValueChanged"
                            OnClientSlideStart="OnClientSlideStart" OnClientSlide="OnClientSlide" OnClientSlideEnd="OnClientSlideEnd"
                            OnClientSlideRangeStart="OnClientSlideRangeStart" OnClientSlideRange="OnClientSlideRange"
                            OnClientSlideRangeEnd="OnClientSlideRangeEnd" OnValueChanged="RadSlider1_ValueChanged"
                            AutoPostBack="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false" EnableDragRange="true"
                            EnableServerSideRendering="true" />
                    </td>
                    <td>
                        $300
                    </td>
                </tr>
            </table>
        </div>
        <div style="margin-bottom: 50px;">
            <h4>
                Information from server (after AJAX request)</h4>
            SelectionStart: $<asp:Label ID="lblSelectionStart" runat="server" Text="50"></asp:Label><br />
            SelectionEnd: $<asp:Label ID="lblSelectionEnd" runat="server" Text="200"></asp:Label>
        </div>
        <div style="width: 450px; margin: 0 auto;">
            <telerik:RadSlider runat="server" ID="RadSlider2" CssClass="dragRangeSlider" Width="450px"
                Height="45px" TrackPosition="TopLeft" IsSelectionRangeEnabled="true" MinimumValue="0"
                MaximumValue="300" SmallChange="10" LargeChange="100" SelectionStart="50" SelectionEnd="200"
                OnClientValueChanged="OnClientValueChanged" OnClientSlideStart="OnClientSlideStart"
                OnClientSlide="OnClientSlide" OnClientSlideEnd="OnClientSlideEnd" ShowDecreaseHandle="false"
                ShowIncreaseHandle="false" OnClientSlideRangeStart="OnClientSlideRangeStart"
                OnClientSlideRange="OnClientSlideRange" OnClientSlideRangeEnd="OnClientSlideRangeEnd"
                OnValueChanged="RadSlider2_ValueChanged" AutoPostBack="true" EnableDragRange="true"
                ItemType="Tick" EnableServerSideRendering="true" />
        </div>
        <div style="margin-bottom: 50px;">
            <h4>
                Information from server (after AJAX request)</h4>
            SelectionStart:
            <asp:Label ID="lblSelectionStart2" runat="server" Text="50"></asp:Label><br />
            SelectionEnd:
            <asp:Label ID="lblSelectionEnd2" runat="server" Text="200"></asp:Label>
        </div>
        <div style="width: 450px; margin: 0 auto;">
            <telerik:RadSlider runat="server" ID="RadSlider3" CssClass="dragRangeSlider" Width="450px"
                Height="70px" IsSelectionRangeEnabled="true" SelectionStart="2" SelectionEnd="4"
                OnClientValueChanged="OnClientValueChanged" OnClientSlideStart="OnClientSlideStart"
                OnClientSlide="OnClientSlide" OnClientSlideEnd="OnClientSlideEnd" OnClientSlideRangeStart="OnClientSlideRangeStart"
                OnClientSlideRange="OnClientSlideRange" OnClientSlideRangeEnd="OnClientSlideRangeEnd"
                OnValueChanged="RadSlider3_ValueChanged" AutoPostBack="true" EnableDragRange="true"
                ItemType="Item" EnableServerSideRendering="true">
                <Items>
                    <telerik:RadSliderItem Text="Very bad" Value="1" runat="server"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Bad" Value="2" runat="server"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Average" Value="3" runat="server"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Good" Value="4" runat="server"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Very Good" Value="5" runat="server"></telerik:RadSliderItem>
                </Items>
            </telerik:RadSlider>
        </div>
        <div>
            <h4>
                Information from server (after AJAX request)</h4>
            SelectionStart value:
            <asp:Label ID="lblSelectionStart3" runat="server" Text="Average"></asp:Label><br />
            SelectionEnd value:
            <asp:Label ID="lblSelectionEnd3" runat="server" Text="Very Good"></asp:Label>
        </div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadSlider1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lblSelectionStart" UpdatePanelRenderMode="Inline" />
                        <telerik:AjaxUpdatedControl ControlID="lblSelectionEnd" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadSlider2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lblSelectionStart2" UpdatePanelRenderMode="Inline" />
                        <telerik:AjaxUpdatedControl ControlID="lblSelectionEnd2" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadSlider3">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lblSelectionStart3" UpdatePanelRenderMode="Inline" />
                        <telerik:AjaxUpdatedControl ControlID="lblSelectionEnd3" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="dblEnableDragRange">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="dblEnableDragRange" UpdatePanelRenderMode="Inline" />
                        <telerik:AjaxUpdatedControl ControlID="RadSlider1" />
                        <telerik:AjaxUpdatedControl ControlID="RadSlider2" />
                        <telerik:AjaxUpdatedControl ControlID="RadSlider3" />
                    </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