Here's a price range slider using DataList and no jQuery
Download the database SQL from here
Download SQL File
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
margin: 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;
}
#price_slider, #price_slider_value
{
width: 400px;
margin: 5px;
}
#empty
{
display: block;
width: 400px;
background-color: #9F9F9F;
color: #fff;
height: 30px;
line-height: 30px;
margin: 5px;
text-align: center;
}
.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;
margin: 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>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<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>
<asp:MultiHandleSliderExtender ID="MultiHandleSliderExtender1" runat="server" TargetControlID="txtSlider"
Minimum="1" Maximum="1000" Increment="1" RaiseChangeOnlyOnMouseUp="true" EnableRailClick="false"
Length="1000" 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>
<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>
</form>
</body>
</html>
Namespaces
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
Code
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);
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;
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();
}
}
}
}
}