Home > DeveloperSection > Articles > Ajax Toolkit SliderExtender Control in ASP.Net

Ajax Toolkit SliderExtender Control in ASP.Net


AJAX AJAX 
Ratings:
0 Comment(s)
 14404  View(s)
Rate this:

Ajax Toolkit SliderExtender Control in ASP.Net


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:

AjaxControl Toolkit SliderExtender Control in ASP.Net

When you slide the slider bar then position value will change and this value will show in Label.

AjaxControl Toolkit SliderExtender Control in ASP.Net


Don't want to miss updates? Please click the below button!

Follow MindStick