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 Q1 2012 released 04/11/2012
select

Slider / Range Slider

Use the RadSlider to filter the RadGrid by setting a price range for the records, displayed in the RadGrid.


$0
$300
SelectionStart: $0
SelectionEnd: $300
ProductCategoryQuantity per unitUnit priceUnits in stock
ChaiBeverages10 boxes x 20 bags$18.0039
ChangBeverages24 - 12 oz bottles$19.0017
Aniseed SyrupCondiments12 - 550 ml bottles$10.0013
Chef Anton's Cajun SeasoningCondiments48 - 6 oz jars$22.0053
Grandma's Boysenberry SpreadCondiments12 - 8 oz jars$25.00120
Uncle Bob's Organic Dried PearsProduce12 - 1 lb pkgs.$30.0015
Northwoods Cranberry SauceCondiments12 - 12 oz jars$40.006
IkuraSeafood12 - 200 ml jars$31.0031
Queso CabralesDairy Products1 kg pkg.$21.0022
Queso Manchego La PastoraDairy Products10 - 500 g pkgs.$38.0086
KonbuSeafood2 kg box$6.0024
TofuProduce40 - 100 g pkgs.$23.2535
Genen ShouyuCondiments24 - 250 ml bottles$15.5039
PavlovaConfections32 - 500 g boxes$17.4529
Carnarvon TigersSeafood16 kg pkg.$62.5042
Teatime Chocolate BiscuitsConfections10 boxes x 12 pieces$9.2025
Sir Rodney's MarmaladeConfections30 gift boxes$81.0040
Sir Rodney's SconesConfections24 pkgs. x 4 pieces$10.003
Gustaf's KnäckebrödGrains/Cereals24 - 500 g pkgs.$21.00104
TunnbrödGrains/Cereals12 - 250 g pkgs.$9.0061
NuNuCa Nuß-Nougat-CremeConfections20 - 450 g glasses$14.0076
Gumbär GummibärchenConfections100 - 250 g bags$31.2315
Schoggi SchokoladeConfections100 - 100 g pieces$43.9049
Nord-Ost MatjesheringSeafood10 - 200 g glasses$25.8910
Gorgonzola TelinoDairy Products12 - 100 g pkgs$12.500
Mascarpone FabioliDairy Products24 - 200 g pkgs.$32.009
GeitostDairy Products500 g$2.50112
Sasquatch AleBeverages24 - 12 oz bottles$14.00111
Steeleye StoutBeverages24 - 12 oz bottles$18.0020
Inlagd SillSeafood24 - 250 g jars$19.00112
123
Page size:
select
 69 items in 3 pages

  • Range slider

    The IsSelectionRangeEnabled property of the RadSlider, when set to true, configures the slider to display two drag-handles. You can se the initial values for each drag-handle using the SelectionStart and the SelectionEnd properties.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Slider.RangeSlider.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:RadToolTip ID="RadToolTip1" runat="server" OffsetY="3" Position="TopCenter"
                ShowCallout="false" Height="20px" ShowEvent="fromcode" HideEvent="FromCode">
            </telerik:RadToolTip>
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

                <script type="text/javascript">
                function OnClientValueChanging(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 %>");
                    ResetToolTipLocation(tooltip);
                    tooltip.set_text(args.get_newValue());
                }
                
                var isSliding = false;
                function OnClientSlideStart(sender, args)
                {
                    isSliding = true;
                
                    var tooltip = $find("<%= RadToolTip1.ClientID %>");
                    ShowRadToolTip(tooltip, sender);
                }
                
                function OnClientSlideEnd(sender, args)
                {
                    isSliding = false;
                
                    var tooltip = $find("<%= RadToolTip1.ClientID %>");
                    tooltip.hide();
                }
                
                function ShowRadToolTip(tooltip, slider)
                {
                    var activeHandle = slider.get_activeHandle();
                    if(!activeHandle) return;
                               
                    tooltip.set_targetControl(activeHandle);
                    ResetToolTipLocation(tooltip);
                }
                
                function ResetToolTipLocation(tooltip)
                {
                    if (!tooltip.isVisible())
                        tooltip.show();
                    else
                        tooltip.updateLocation();
                }
                </script>

            </telerik:RadCodeBlock>
            <b>Use the RadSlider to filter the RadGrid by setting a price range for the records,
                displayed in the RadGrid.</b><br />
            <br />
            <br />
            <table>
                <tr>
                    <td>
                        $0</td>
                    <td>
                        <telerik:RadSlider runat="server" ID="RadSlider1" IsSelectionRangeEnabled="true"
                            MinimumValue="0" MaximumValue="300" SmallChange="1" SelectionStart="0" SelectionEnd="300"
                            OnClientValueChanging="OnClientValueChanging" OnValueChanged="RadSlider1_ValueChanged"
                            OnClientSlideStart="OnClientSlideStart" OnClientSlideEnd="OnClientSlideEnd" AutoPostBack="true"
                            ShowDecreaseHandle="false" ShowIncreaseHandle="false" />
                    </td>
                    <td>
                        $300</td>
                </tr>
            </table>
            SelectionStart: $<asp:Label ID="lblSelectionStart" runat="server" Text="0"></asp:Label><br />
            SelectionEnd: $<asp:Label ID="lblSelectionEnd" runat="server" Text="300"></asp:Label>
            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1"
                Width="600px" AllowPaging="True" PageSize="30" Height="300px" GridLines="None">
                <GroupPanel ID="GroupPanel" Style="width:100%;">
                </GroupPanel>
                <MasterTableView AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="SqlDataSource1"
                    TableLayout="Fixed">
                    <RowIndicatorColumn>
                        <HeaderStyle Width="20px" />
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn>
                        <HeaderStyle Width="20px" />
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn DataField="ProductName" HeaderText="Product" SortExpression="ProductName"
                            UniqueName="ProductName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="CategoryName" HeaderText="Category" SortExpression="CategoryName"
                            UniqueName="CategoryName">
                            <HeaderStyle Width="100px" />
                            <ItemStyle Width="100px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="QuantityPerUnit" HeaderText="Quantity per unit"
                            SortExpression="QuantityPerUnit" UniqueName="QuantityPerUnit">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="UnitPrice" DataType="System.Decimal" HeaderText="Unit price"
                            SortExpression="UnitPrice" UniqueName="UnitPrice" DataFormatString="{0:C}">
                            <HeaderStyle Width="70px" />
                            <ItemStyle Width="70px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="UnitsInStock" DataType="System.Int16" HeaderText="Units in stock"
                            SortExpression="UnitsInStock" UniqueName="UnitsInStock">
                            <HeaderStyle Width="90px" />
                            <ItemStyle Width="90px" />
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <FilterMenu EnableTheming="True">
                    <CollapseAnimation Duration="200" Type="OutQuint" />
                </FilterMenu>
                <ClientSettings>
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                </ClientSettings>
            </telerik:RadGrid>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ProductName], [ProductID], [CategoryName], [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM [Alphabetical list of products] WHERE (UnitPrice > @MinimumPrice AND UnitPrice < @MaximumPrice)">
                <SelectParameters>
                    <asp:ControlParameter ControlID="RadSlider1" PropertyName="SelectionStart" Name="MinimumPrice" />
                    <asp:ControlParameter ControlID="RadSlider1" PropertyName="SelectionEnd" Name="MaximumPrice" />
                </SelectParameters>
            </asp:SqlDataSource>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadSlider1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="lblSelectionStart" UpdatePanelRenderMode="Inline" />
                            <telerik:AjaxUpdatedControl ControlID="lblSelectionEnd" UpdatePanelRenderMode="Inline" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </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-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451