SliderExtender attaches to a TextBox control and enables the TextBox control to behave similar to a graphical Slider so that the users can pick up a numeric values up to a specific range. The website SliderExtender makes the concept of SliderExtender clear.
lets take an Example
Copy this code and paste your web form ( Before copy you must add ajax control tool kit to your project )
Output:
lets take an Example
Copy this code and paste your web form ( Before copy you must add ajax control tool kit to your project )
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate >
<asp:Label ID="Label1" runat="server" Text="Move the slider to see its working"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:SliderExtender ID="SliderExtender1" runat="server" Minimum ="0" Maximum ="100" EnableHandleAnimation ="true" Orientation ="Horizontal" TooltipText ="Move Slider" TargetControlID ="TextBox2" BoundControlID ="TextBox3" Steps ="100" ></asp:SliderExtender>
</ContentTemplate></asp:UpdatePanel>
</div>
</form>
</body>
</html>
Properties of SliderExtender Control
TargetControlID : Sets the ID control which you want to attach with the extender.
Minium : Sets the minimum value allowed by the extender.
Maximum : Set the maximum value allowed by the extender.
Decimals : Specifies number of decimal digits for the value.
Steps: Specifies number of discrete values in the slider's range.
Value : Specifies the current value of the slider.
EnableHandleAnimation : Enables or disables the handle animation by setting its value to true or false respectively.
HandleAnimationDuration : sets the time in miliseconds for the handle animation to occurs.
RailCssClass : Set the name of the css class for the slider's rail.
HandleCssClass : Set the name of the css class for the slider's handle.
HandleImageURL : Set the URL of the image that you want to use as a slider handle.
Length : Set the dimension (Width or height ) of the slider (horizontal or vertical).
BoundControlID : Set the ID of the control that displays the current value of the slider.
TargetControlID : Sets the ID control which you want to attach with the extender.
Minium : Sets the minimum value allowed by the extender.
Maximum : Set the maximum value allowed by the extender.
Decimals : Specifies number of decimal digits for the value.
Steps: Specifies number of discrete values in the slider's range.
Value : Specifies the current value of the slider.
EnableHandleAnimation : Enables or disables the handle animation by setting its value to true or false respectively.
HandleAnimationDuration : sets the time in miliseconds for the handle animation to occurs.
RailCssClass : Set the name of the css class for the slider's rail.
HandleCssClass : Set the name of the css class for the slider's handle.
HandleImageURL : Set the URL of the image that you want to use as a slider handle.
Length : Set the dimension (Width or height ) of the slider (horizontal or vertical).
BoundControlID : Set the ID of the control that displays the current value of the slider.