How to Use Slider Extender Control on ASP.NET Website

By
Hi Friend, Today we will learn about Slider Extender Control in AjaxToolkit. You can take input from slider control and display the output to another control. It enables you to upgrade a classic Text Box control into a graphical slider.The client uses this slider to pick up a number value from a finite range.The default range of the slider is from 0 to 100. You can set the orientation of the slider either horizontal or vertical.If you have not install AjaxControlKit on your visual studio, first install it from Here.      
There are some properties of Slider Extender control as given below:-

  • TargetControl ID :- It sets the ID of the control which you want to attach with this extender.
  • Maximum:- It sets the maximum value of the extender control.
  • Minimum:- It sets the minimum value of the extender control.
  • Steps:- It helpful to specifies number of discrete values in the slider's range.
  • Value:- it specify the current value of the slider.
  • Decimals:-It specifies the number of decimal digits for the value.
  • EnableHandleAnimation:- It enables or disables the handle animation by setting its value to True or False respectively. 
  • HandleAnimationDuration:- It sets the time in milliseconds for the handle animation to occur.
  •  HandleCssClass :- It sets the name of the css class for the slider's handle.
  • RailCssClass :- It sets the name of the css class for the slider's rail. 
  • HandleImageUrl :-It sets the uniform resource Locator(URL) of the image the you want t use as a slider handle.
  • Length :- It sets the dimension (height or width) of the slider.
  • BoundControl ID:-It sets ID of the control that displays the current value of the slider.
  • TooltipText :- It sets the text that is displayed when the mouse pointer hovers over the handle of the extended Text Box control. 
There are some steps to implement this concepts as given below:-
Step 1 :-  First create an Empty  website on your visual studio --> Open solution Explorer --> Add a New Web Form (Default.aspx) --> Drag and Drop ToolKitScriptManager,Inside Update Panel  Drag and drop Text Box and Label controls as given below:-
form

Step 2 :- Now open Source ---> drag and drop  SliderExtender control from the toolbox -->  and Set its some properties as given below:-
codes

Step 3 :- You can see complete source codes from below:-
<%@ 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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <span class="style1"><strong>How to Use SliderExtender Control on Asp.Net 
        Website</strong></span><br />
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <br />
        <span class="style2"><strong>Move the Silder and See the output</strong></span>:-<asp:UpdatePanel ID="UpdatePanel1" 
            runat="server">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Height="23px" 
                    style="font-size: large" Width="216px"></asp:TextBox>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <asp:Label ID="Label1" runat="server" 
                    style="font-weight: 700; color: #800000; font-size: x-large" Text="Label"></asp:Label>
              
              <asp:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="TextBox1" 
              BoundControlID="Label1" EnableHandleAnimation="true" Minimum="0" Maximum="500" 
              Steps="500" TooltipText="Move Slider" Orientation="Horizontal">
            </asp:SliderExtender>
            </ContentTemplate>
          </asp:UpdatePanel>a  
    </div>
    </form>
</body>
</html>

Step 4 :- Now Run  the application(press F5) and see the output as shown below:-
output


For More...
Download attached file
    Download

0 comments:

Post a comment

Powered by Blogger.