Slider - Range Slider

Use the RadSlider to filter 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:
 69 items in 3 pages
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" Inherits="Telerik.Web.Examples.Slider.RangeSlider.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <div><span class="title">Use the RadSlider to filter the RadGrid.</span></div>
        <br />
        <table>
            <tr>
                <td>$0</td>
                <td>
                    <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider1" IsSelectionRangeEnabled="true"
                        MinimumValue="0" MaximumValue="300" SmallChange="1" SelectionStart="0" SelectionEnd="300"
                        OnValueChanged="RadSlider1_ValueChanged"
                        OnClientValueChanging="demo.sliderClientValueChanging" 
                        OnClientSlideStart="demo.sliderClientSlideStart" 
                        OnClientSlideEnd="demo.sliderClientSlideEnd" 
                        AutoPostBack="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false">
                    </telerik:RadSlider>
                </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 RenderMode="Lightweight" 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"></HeaderStyle>
                </RowIndicatorColumn>
                <ExpandCollapseColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </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"></HeaderStyle>
                        <ItemStyle Width="100px"></ItemStyle>
                    </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"></HeaderStyle>
                        <ItemStyle Width="70px"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="UnitsInStock" DataType="System.Int16" HeaderText="Units in stock"
                        SortExpression="UnitsInStock" UniqueName="UnitsInStock">
                        <HeaderStyle Width="90px"></HeaderStyle>
                        <ItemStyle Width="90px"></ItemStyle>
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <FilterMenu EnableTheming="True">
                <CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation>
            </FilterMenu>
            <ClientSettings>
                <Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>
            </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>
                <asp:ControlParameter ControlID="RadSlider1" PropertyName="SelectionEnd" Name="MaximumPrice"></asp:ControlParameter>
            </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>
                        <telerik:AjaxUpdatedControl ControlID="lblSelectionStart" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="lblSelectionEnd" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        
        <telerik:RadToolTip RenderMode="Lightweight" 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 getToolTip() {
                    return $find("<%= RadToolTip1.ClientID %>");
                }
            </script>
        </telerik:RadCodeBlock>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?