In this article I will explain with an example, how to implement ASP.Net AJAX MultiHandleSliderExtender control of the ASP.Net AjaxControlToolkit Library using C# and VB.Net.
This article explains how to use ASP.Net AJAX MultiHandleSliderExtender control along with ASP.Net DataList control to display and filter database records based on the minimum and maximum price.
 
 

Database

I have made use of the following table Products with the schema as follow.
ASP.Net AJAX MultiHandleSliderExtender example
 
Note: You can download the database table SQL by clicking the download link below.
            Download SQL file
 
 

HTML Markup

The following HTML Markup consists of:
ToolkitScriptManager – For enabling ASP.Net AJAX.
UpdateProgress – For show loading gif during asynchronous AJAX requests.
UpdatePanel – For refreshing control.
The UpdatePanel consists of a Label, an ASP.Net AJAX MultiHandleSliderExtender and a TextBox, two HiddenFields, a hidden LinkButton and a DataList control.
The ID of the TextBox is set as TargetControlID while the ID of the two HiddenFields are set as MultiHandleSliderTarget for the ASP.Net AJAX MultiHandleSliderExtender.
The ASP.Net AJAX MultiHandleSliderExtender is specified with OnClientDragEnd event handler and when the Slider is changed the LinkButton click event is triggered.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <div class="modal">
            <div class="center">
                <img alt="" src="loader.gif" />
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div style="marg in:10px">
            <asp:Label ID="lblSliderValue" runat="server" />
            <asp:MultiHandleSliderExtender ID="MultiHandleSliderExtender1" runat="server" TargetControlID="txtSlider"
                Minimum="100" Maximum="600" Increment="1" RaiseChangeOnlyOnMouseUp="true" EnableRailClick="false"
                Length="600" OnClientDragEnd="OnClientDragEnd">
                <MultiHandleSliderTargets>
                    <asp:MultiHandleSliderTarget ControlID="hfStart" />
                    <asp:MultiHandleSliderTarget ControlID="hfEnd" />
                </MultiHandleSliderTargets>
            </asp:MultiHandleSliderExtender>
            <asp:HiddenField ID="hfStart" runat="server" />
            <asp:HiddenField ID="hfEnd" runat="server" />
            <asp:TextBox ID="txtSlider" runat="server"></asp:TextBox>
            <asp:LinkButton ID="lnkSliderChanged" OnClick="SliderChanged" runat="server" />
            <script type="text/javascript">
                function OnClientDragEnd(sender, args) {
                    document.getElementById("<%=lnkSliderChanged.ClientID%>").click();
                }
            </script>
        </div>
        <br />
        <hr />
        <asp:DataList ID="dlProducts" runat="server" RepeatLayout="Table" RepeatColumns="3"
            CellPadding="2" CellSpacing="20">
            <ItemTemplate>
                <table class="item" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td align="center" class="header">
                            <span class="name">
                                <%# Eval("Name")%></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" class="body">
                            <asp:Image ImageUrl='<%# Eval("ProductId", "~/images/{0}.png")%>' runat="server"
                                CssClass="image" />
                        </td>
                    </tr>
                    <tr>
                        <td class="footer" align="center">
                            <span class="button">
                                <%# Eval("Price")%></span>
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:DataList>
    </ContentTemplate>
</asp:UpdatePanel>
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
 
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
 
 

Implementing the ASP.Net AJAX MultiHandleSliderExtender and populating the DataList

Inside the Page Load event of the page, the BindDataList function is executed. Inside the BindDataList function, first the values of the HiddenFields are fetched and set to the values of start and end variables. Initially the values of HiddenFields are blank and hence the values of start and end variables is set to 0.
Using the values of start and end variables the list of Products is fetched from database and is used to populate the DataList control.
Along with the Product records, the Minimum and Maximum cost of the Product is also fetched and the values are set to the respective HiddenFields.
When the Slider is changed, the OnClientDragEnd event of ASP.Net AJAX MultiHandleSliderExtender is triggered which raises the SliderChanged event handler and the BindDataList function is executed.
On this occasion the HiddenFields have the Slider start and end values and these values are used to fetch the filtered Product records based on the price range selected in the ASP.Net AJAX MultiHandleSliderExtender.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindDataList();
    }
}
 
protected void SliderChanged(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(2000);//Added for testing and hence remove.
    this.BindDataList();
}
 
private void BindDataList()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    int start = ! string.IsNullOrEmpty(Request.Form[hfStart.UniqueID]) ? int.Parse(Request.Form[hfStart.UniqueID]) : 0;
    int end = ! string.IsNullOrEmpty(Request.Form[hfEnd.UniqueID]) ? int.Parse(Request.Form[hfEnd.UniqueID]) : 0;
    lblSliderValue.Text = string.Format("Rs. {0} -Rs. {1}", start, end);
    using (SqlConnection con = new SqlConnection(constr))
    {
        string query = "SELECT * FROM Products WHERE (Price BETWEEN @Start AND @End) OR (@Start = 0 AND @End = 0);";
        query += "SELECT MIN(Price) [Min], MAX(Price) [Max] FROM Products";
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.Connection = con;
            cmd.Parameters.AddWithValue("@Start", start);
            cmd.Parameters.AddWithValue("@End", end);
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataSet ds = new DataSet();
                sda.Fill(ds);
                dlProducts.DataSource = ds.Tables[0];
                dlProducts.DataBind();
                if (!this.IsPostBack)
                {
                    hfStart.Value = ds.Tables[1].Rows[0]["Min"].ToString();
                    hfEnd.Value = ds.Tables[1].Rows[0]["Max"].ToString();
                    lblSliderValue.Text = string.Format("Rs. {0} -Rs. {1}", hfStart.Value, hfEnd.Value);
                }
            }
        }
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs)
    If Not Me.IsPostBack Then
        Me.BindDataList()
    End If
End Sub
 
Protected Sub SliderChanged(sender As Object, e As EventArgs) Handles Me.Load
    System.Threading.Thread.Sleep(2000) 'Added for testing and hence remove.
    Me.BindDataList()
End Sub
 
Private Sub BindDataList()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim start As Integer = If(Not String.IsNullOrEmpty(Request.Form(hfStart.UniqueID)), Integer.Parse(Request.Form(hfStart.UniqueID)), 0)
    Dim [end] As Integer = If(Not String.IsNullOrEmpty(Request.Form(hfEnd.UniqueID)), Integer.Parse(Request.Form(hfEnd.UniqueID)), 0)
    lblSliderValue.Text = String.Format("Rs. {0} -Rs. {1}", start, [end])
    Using con As New SqlConnection(constr)
        Dim query As String = "SELECT * FROM Products WHERE (Price BETWEEN @Start AND @End) OR (@Start = 0 AND @End = 0);"
        query &= "SELECT MIN(Price) [Min], MAX(Price) [Max] FROM Products"
        Using cmd As New SqlCommand(query)
            cmd.Connection = con
            cmd.Parameters.AddWithValue("@Start", start)
            cmd.Parameters.AddWithValue("@End", [end])
            Using sda As New SqlDataAdapter(cmd)
                Dim ds As New DataSet()
                sda.Fill(ds)
                dlProducts.DataSource = ds.Tables(0)
                dlProducts.DataBind()
                If Not Me.IsPostBack Then
                    hfStart.Value = ds.Tables(1).Rows(0)("Min").ToString()
                    hfEnd.Value = ds.Tables(1).Rows(0)("Max").ToString()
                    lblSliderValue.Text = String.Format("Rs. {0} -Rs. {1}", hfStart.Value, hfEnd.Value)
                End If
            End Using
        End Using
    End Using
End Sub
 
 

CSS styles

Below are the CSS classes that were used for this article.
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
        marg in: 0;
        padding: 0;
    }
    .loader
    {
        height: 50px;
        width: 100px;
    }
    .item
    {
        width: 202px;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 8px 2px #ccc;
    }
    .item .header
    {
        height: 30px;
        background-color: #9F9F9F;
        color: #fff;
    }
    .item .body
     {
        width: 200px;
        height: 200px;
    }
    .item .image
    {
        height: 200px;
        width: 200px;
    }
    .item .footer
     {
        height: 50px;
    }
    .button,.button:hover
    {
        height: 45px;
        padding: 10px;
        color: White;
        line-height: 23px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
        text-decoration: none;
        background-color: #9F9F9F;
        border: 1px solid #5C5C5C;
    }
    .modal
    {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }
    .center
     {
        z-index: 1000;
        marg in: 300px auto;
        padding: 10px;
        width: 130px;
        background-color: White;
        border-radius: 10px;
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }
    .center img
    {
        height: 128px;
        width: 128px;
    }
</style>
 
 

Screenshot

ASP.Net AJAX MultiHandleSliderExtender example
 
 

Demo

View Demo
 
 

Downloads

Download Code