The Slider extender allows upgrading an asp: TextBox to a graphical slider that allows the user to choose a numeric value from a defined range.
AJAX Slider control also displays the current position in label control if its ID is passed into the BoundControlID property of the Slider extender control. You can also specify the orientation of slider control as horizontal or vertical. Just define the maximum and minimum value for the AJAX slider Extender it moves to and from and changes the return value.
AJAX Slider Extender Control Properties
TargetControlID: ID of the target textbox control, it stores the position state of slider extender control.
BoundControlID: ID of the textbox or label control, to display the current position value of slider control.
Decimals: number of precision point places required after decimal point.
Maximum: maximum value for the slider extender control position.
Minimum: minimum value for the slider control position.
Length: Height or width of the slider control according to the orientation of extender.
EnableHandleAnimation: to enable or disable the animated movement feature of slider extender control.
Code:
We add these controls on aspx page and run the project
<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control--%>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<cc1:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="TextBox1"Length="200" Decimals="1" Minimum="1" Maximum="100" EnableHandleAnimation="true" BoundControlID="Label1">
</cc1:SliderExtender>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server" AssociatedControlID="TextBox1"> </asp:Label>
<%--Here textbox will work as slider. AssociatedControlID="TextBox1 so that when slider position changes then changes value will show in label --%>
Here TargetControlID is "TextBox1" it stores the position state of slider extender control. and BoundControlID is "Label1" in which the current position value will show. Decimals="1" number of precision point places required after decimal point. Maximum="100” maximum value for the slider extender control position. Minimum="1" Minimum: minimum value for the slider control position. Initially position value is 0.0
Output:
When you slide the slider bar then position value will change and this value will show in Label.
Anonymous User
25-Mar-2019Thanks for sharing.
Sushant Mishra
25-Jul-2017It was really helpful to read this post.