by

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

2 thoughts on “How to add Single Slider and Multi Slider to ASP .NET Page”

  1. your code is good it show exactly what i want but when i add it shows error even when it is populating automatically so please tell me what should i do

    Reply

Leave a comment