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:-
There are some steps to implement this concepts as given below:-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.
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:-
Step 2 :- Now open Source ---> drag and drop SliderExtender control from the toolbox --> and Set its some properties as given below:-
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>
<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>
For More...
- Learn C # complete Study
- Learn Asp.net with real examples
- Learn Ado,net with examples
- Learn mvc with examples
- Learn wpf with complete theory and examples
- Learn .net interview questions and answers
Download
0 comments:
Post a Comment