AJAX Control Toolkit Slider Sample Code

by top54u.com 07 Jun, 2008

Inside ASP .NET Tutorials | ASP.Net AJAX

How to install AJAX Control Toolkit

ASP.Net AJAX Control Toolkit

ASP.Net AJAX Tab Extender CSS Class Styles

ASP.Net Dynamic AJAX Dropdown Menu Extender Control

ASP.Net AJAX Tab Control Extender

AJAX Slider Control Extender

ASP.Net AJAX Star Rating Control using ClientCallBack

In this sample example of AJAX Control Toolkit Slider extender control we will create a color mixer that will generate a color hex code from the three different values of sliders. Here we have used three slider extenders to produce the RGB combination i.e. red, green and blue. To generate the hex code from the decimal values of three different slider extender controls we have used a javascript function to convert decimal to hex code. At server side page on event is also attached to the target textboxes of slider extender controls. This attached event calls the javascript function when value property of the asp:textbox changes. Name of the event attached is onchange, which fires at client side.

HTML code for Slider Extender Control Sample

[code:html] <table border="0" cellpadding="5" cellspacing="0">
            <tr>
                <td>
                    <ajaxToolkit:SliderExtender
                        ID="SliderExtender1"
                        BoundControlID="slider1_display"
                        Decimals="0"
                        Minimum="0"
                        Maximum="255"
                        runat="server"
                        TargetControlID="slider1"
                        EnableHandleAnimation="true"
                        TooltipText="{0}">
                    </ajaxToolkit:SliderExtender>

                    <asp:TextBox ID="slider1" runat="server"></asp:TextBox>
                    <asp:Label ID="slider1_display" runat="server"></asp:Label>

                    <br />
                    <br />

                    <ajaxToolkit:SliderExtender
                        ID="SliderExtender2"
                        runat="server"
                        BoundControlID="slider2_display"
                        Decimals="0"
                        Maximum="255"
                        Minimum="0"
                        TargetControlID="slider2"
                        EnableHandleAnimation="true"
                        TooltipText="{0}">
                    </ajaxToolkit:SliderExtender>

                    <asp:TextBox ID="slider2" runat="server"></asp:TextBox>
                    <asp:Label ID="slider2_display" runat="server"></asp:Label>

                    <br />
                    <br />

                    <ajaxToolkit:SliderExtender
                        ID="SliderExtender3"
                        runat="server"
                        BoundControlID="slider3_display"
                        Decimals="0"
                        Maximum="255"
                        Minimum="0"
                        TargetControlID="slider3"
                        EnableHandleAnimation="true"
                        TooltipText="{0}">
                    </ajaxToolkit:SliderExtender>

                    <asp:TextBox ID="slider3" runat="server"></asp:TextBox>
                    <asp:Label ID="slider3_display" runat="server"></asp:Label>

                    <br />
                    <br />

                    <asp:Panel ID="Panel1" runat="server" Height="50px" Width="50px" style="border: solid 1px #c0c0c0"></asp:Panel>

                    <asp:TextBox ID="txtHexCode" runat="server" style="text-transform:uppercase"></asp:TextBox>

                </td>
            </tr>
            <tr>
                <td>
                </td>
            </tr>
        </table> [/code]

C# Code for Slider Extender Control

Onchange client side event is being attached to call the javascript function that converts the decimal value into hex code and generates the color shade for the background of Panel control.

protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
       slider1.Attributes.Add("onchange", "setColor();");
       slider2.Attributes.Add("onchange", "setColor();");
       slider3.Attributes.Add("onchange", "setColor();");
      }

}

Next see the AJAX Slider Control JavaScript Code...

Spotlight.....

Currently rated 5.0 by 1 people