Home > ASP.Net, Jquery > How to Implement jQuery UI Slider with ASP.NET

How to Implement jQuery UI Slider with ASP.NET


Hi all,

Try this example to Implement jQuery UI slider with ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Slider_Demo.aspx.cs" Inherits="Slider_Demo" %>
<!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">
<link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/start/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js">
</script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$("#slider").slider(
{
min: <%=MinValue%>,
max: <%=MaxValue%>,
step: <%=Step %>,
slide: function (event, ui) {
$("#txtValue").val(ui.value);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="slider" style="width: 200px;">
</div>
<asp:TextBox ID="txtValue" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>

And In Code behind :


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Slider_Demo : System.Web.UI.Page
{
public const int MinValue = 0;
public const int MaxValue = 100;
public const int Step = 5;
protected void Page_Load(object sender, EventArgs e)
{

}
}

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Jquery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: