How 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>
        <br />
        <asp:TextBox ID="txtValue" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>
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)
    {

    }
}

No comments:

Post a Comment