How to add Single Slider and Multi Slider to ASP .NET Page

Here I gave detailed explanation how to use single and multi handler slider in ASP.NET using AJAX slider control. Follow the below explanation and source code.

Client side
In the client side of the page I have create two slider control one for show single slider in web page and another is show example of multi slider in your webpage.

Single slider:
Single slider is used to show only single selected value in textbox, so we can get product from database from minimum amount to entered amount.

<%--Single slider Example--%>
<asp:MultiHandleSliderExtender ID="multiHandleSliderExtender1" runat="server" TargetControlID="TextBox1"
    BehaviorID="multiHandleSliderOne" Minimum="1" Maximum="100" BoundControlID="TextBox2"
    Steps="5" Length="100" TooltipText="{0}">          
    </asp:MultiHandleSliderExtender>            
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2"><b>Single slider Extender</b></td>
</tr>
<tr>
<td height="40">Select price to be search</td>
<td style="padding-left:10px;"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td height="40">Selected Value</td>
<td style="padding-left:10px;"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
</tr>
 <tr>
<td height="40" align="center" colspan="2"><asp:Button ID="Button1" runat="server" 
        Text="Search" CssClass="btn" onclick="Button1_Click" /></td>
</tr>
</table>

In server side write query for search (single slider) search like this

protected void Button1_Click(object sender, EventArgs e)
{
    sqlcon.Open();
    sqlcmd = new SqlCommand("select * from prod where price between 0 and " + TextBox2.Text, sqlcon);
    da = new SqlDataAdapter(sqlcmd);
    da.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
    sqlcon.Close();
}

Multi Slider:
If we use MultiHandle slider is show two or more slider in a web page for user select values like from and to price.

<%--Multi slider Example--%>
<asp:MultiHandleSliderExtender ID="multiHandleSliderExtenderTwo" runat="server" TargetControlID="sliderTwo"
    BehaviorID="multiHandleSliderTwo" Minimum="1" Maximum="100"
    Steps="5" Length="100" TooltipText="{0}">            
    <MultiHandleSliderTargets>
        <asp:MultiHandleSliderTarget ControlID="txtfrm" />
        <asp:MultiHandleSliderTarget ControlID="txtto"/>
    </MultiHandleSliderTargets>
    </asp:MultiHandleSliderExtender>
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2"><b>Multi slider Extender</b></td>
</tr>
<tr>
<td height="40">Select price to be search</td>
<td style="padding-left:10px;"><asp:TextBox ID="sliderTwo" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>From</td>
<td style="padding-left:10px;"><asp:TextBox ID="txtfrm" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td height="40">To</td>
<td style="padding-left:10px;"><asp:TextBox ID="txtto" runat="server" Text="100"></asp:TextBox></td>
</tr>
<tr>
    <td height="40" align="center" colspan="2"><asp:Button ID="Button2" runat="server" 
            Text="Search" CssClass="btn" onclick="Button2_Click" /></td>
</tr>
</table>

In server side write query for search (Multi slider) search like this

protected void Button2_Click(object sender, EventArgs e)
{
    sqlcon.Open();
    sqlcmd = new SqlCommand("select * from prod where price between " + txtfrm.Text + " and " + txtto.Text , sqlcon);
    da = new SqlDataAdapter(sqlcmd);
    da.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
    sqlcon.Close();
}

Complete Code
Client side

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AJAX Single and Multi slider Example</title>
    <style type="text/css">
    .btn
    {
        background-color: #033280;
        color: White;
        font-size: 12px;
        font-weight: bold;   
    }   
        .style1
        {
            height: 40px;
        }
  </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <%--Single slider Example--%>
        <asp:MultiHandleSliderExtender ID="multiHandleSliderExtender1" runat="server" TargetControlID="TextBox1"
            BehaviorID="multiHandleSliderOne" Minimum="1" Maximum="100" BoundControlID="TextBox2"
            Steps="5" Length="100" TooltipText="{0}">          
            </asp:MultiHandleSliderExtender>            
        <table width="600" cellpadding="0" cellspacing="0" align="center">
        <tr>
        <td colspan="2"><b>Single slider Extender</b></td>
        </tr>
        <tr>
        <td height="40">Select price to be search</td>
        <td style="padding-left:10px;"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
        <td height="40">Selected Value</td>
        <td style="padding-left:10px;"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
        </tr>
         <tr>
        <td height="40" align="center" colspan="2"><asp:Button ID="Button1" runat="server" 
                Text="Search" CssClass="btn" onclick="Button1_Click" /></td>
        </tr>
        </table> 
            
         
      <%--Multi slider Example--%>
              
            <asp:MultiHandleSliderExtender ID="multiHandleSliderExtenderTwo" runat="server" TargetControlID="sliderTwo"
            BehaviorID="multiHandleSliderTwo" Minimum="1" Maximum="100"
            Steps="5" Length="100" TooltipText="{0}">
            <MultiHandleSliderTargets>
            <asp:MultiHandleSliderTarget ControlID="txtfrm" />
            <asp:MultiHandleSliderTarget ControlID="txtto"/>
            </MultiHandleSliderTargets>
            </asp:MultiHandleSliderExtender>
        <table width="600" cellpadding="0" cellspacing="0" align="center">
        <tr>
        <td colspan="2"><b>Multi slider Extender</b></td>
        </tr>
        <tr>
        <td height="40">Select price to be search</td>
        <td style="padding-left:10px;"><asp:TextBox ID="sliderTwo" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
        <td>From</td>
        <td style="padding-left:10px;"><asp:TextBox ID="txtfrm" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
        <td height="40">To</td>
        <td style="padding-left:10px;"><asp:TextBox ID="txtto" runat="server" Text="100"></asp:TextBox></td>
        </tr>
        <tr>
            <td height="40" align="center" colspan="2"><asp:Button ID="Button2" runat="server" 
                    Text="Search" CssClass="btn" onclick="Button2_Click" /></td>
        </tr>
        </table> 
        
         <%--Grid View for Display search record--%>
           
          <table width="600" cellpadding="0" cellspacing="0" align="center">
        <tr>
        <td colspan="2" height="60" align="center">
            <asp:GridView ID="GridView1" runat="server">
            </asp:GridView>
        </td>
        </tr>
        </table>
      
    </div>
    </form>
</body>
</html>

Server side

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

public partial class _Default : System.Web.UI.Page 
{
    SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString);
    SqlCommand sqlcmd = new SqlCommand();
    SqlDataAdapter da = new SqlDataAdapter();
    DataTable dt = new DataTable();

    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        sqlcon.Open();
        sqlcmd = new SqlCommand("select * from prod where price between 0 and " + TextBox2.Text, sqlcon);
        da = new SqlDataAdapter(sqlcmd);
        da.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
        sqlcon.Close();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        sqlcon.Open();
        sqlcmd = new SqlCommand("select * from prod where price between " + txtfrm.Text + " and " + txtto.Text , sqlcon);
        da = new SqlDataAdapter(sqlcmd);
        da.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
        sqlcon.Close();
    }
}

Output
Slider_ouput

Source code:
Download the attached source code and try to learn AJAX Slider control and its uses.

Front End: ASP.NET 
Code Behind: C#

Conclusion:
I hope this article is help to know about AJAX Slider control in ASP.NET.

 Attachments

How to stop ModalPopupExtender-flickering-on-pageload

 If we use the ModalPopupExtender of  Ajax Control Toolkit we may run into flickering issue i.e. the content of ModalPopupExtender shows up for a moment during the page load and then disappears, while it should not be displayed on the page load.To solve this problem we have to set up display property ‘none’ on the pop-up control.As the content of the panel will be shown as popup we have to set the required style there.


<asp:Panel ID=”pnlPicture” runat=”server” CssClass=”modalPopup”  Style=”display:none;”/>

   Now ModalPopupExtender will work perfect for IE but may not work for Firefox. In page load the Modal Popup will not flicker but on a postback or if the page being redirected by a Response.Redirect the Modal Popup will flash. For that we have to set up the style with javascript.
 
function getFlickerSolved()
{
    document.getElementById(‘<%=pnlPicture.ClientID%>’).style.display = ‘none’;
}
 
And we have to call this javascript function on onOkScript/onCancelScript of modalpopupextender or just before the page load.
Code:
<asp:LinkButton ID=”lbtnChangePhoto” runat=”server” Text=”Edit” ToolTip=”Edit Picture”>
</asp:LinkButton>    <!– Clicking on this button The Modalpopup will open –>
 
<asp:Panel ID=”pnlPicture” runat=”server” CssClass=”modalPopup” Style=”display:none;”>
    <p>
        <asp:FileUpload ID=”photoUpload” runat=”server” />
    </p>
    <p>
        <asp:Button ID=”btnUpload” runat=”server” Text=”Upload” OnClick=”btnUpload_Click” onClientClick=”getFlickerSolved();/>”
        <asp:Button ID=”btnHidePopup” runat=”server” Text=”Cancel” />
    </p>
</asp:Panel> <!– The content of this panel will appear as popup –>
 
 <cc1:ModalPopupExtender ID=”modalPopupChangePicture” TargetControlID=”lbtnChangePhoto”PopupControlID=”pnlUploadPicture” runat=”server”
BackgroundCssClass=”modalPopupBackgroundStyle” CancelControlID=”btnHidePopup”onCancelScript=”getFlickerSolved();“>
</cc1:ModalPopupExtender>
 Note: It may not work when “display:none” is in an external stylesheet .It should be in the  Tag.