SliderExtender in asp.net ajax
SliderExtender is an asp.net ajax control toolkit's extender control. SliderExtender control allow asp.net developers
to upgrade a TextBox server control to a graphical slider. The slider provide a way to users to choose a numeric value
from a finite range.
When someone choose a value using the slider, it is automatically persisted during full or partial postbacks. asp.net
developers can continue to reference the TextBox to get and set the slider's value. A typical slider have three parts
those are a rail, a handle and a TextBox or label to show the slider's current value.
SliderExtender control's have the following properties those are TargetControlID, BoundControlID, Minimum, Maximum, Decimals,
Steps, Value, EnableHandleAnimation, HandleAnimationDuration, RailCssClass, HandleCssClass, HandleImageURL, Length, RaiseChangeOnlyOnMouseUp
and TooltipText.
SliderExtender TargetControlID property specify a TextBox server control which we want to extend as a Slider. BoundControlID property
also specify a TextBox or a Label control to display slider's value. Length property specify the Width of a horizontal slider
or height of a vertical slider when default layout is used.
TooltipText property display a text as tooltip when the slider's handle is hovered. The {0} placeholder in the text is replaced
with the current value of slider.
Minimum property specify the minimum value allowed in slider and Maximum property set the maximum allowed value. Decimals property specify the number of
decimal digits for the value. Steps property specify the number of discrete values inside slider's range. Value property indicate the current value
of slider.
EnableHandleAnimation property allow us to enable or disable handle animation of slider. If handle animation is enabled we can set the
animation duration in milliseconds using HandleAnimationDuration property.
If we set the RaiseChangeOnlyOnMouseUp property value to true, it fires the change event on the extended TextBox only when the left mouse button
is released.
HandleCssClass and RailCssClass property help us to change the look and feel (design) of slider's rail and handle using css.
UsingSliderExtender.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<script runat="server">
protected void LinkButton1_Click(object sender, EventArgs e)
{
int imageWidth = Convert.ToInt32(TextBox2.Text);
Image1.Width = 1 * imageWidth;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>How to use SliderExtender in asp.net ajax</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:DarkSeaGreen; font-style:italic;">Ajax Control Toolkit Example: Using SliderExtender</h2>
<hr width="450" align="left" color="DarkSeaGreen" />
<asp:ScriptManager
ID="ScriptManager1"
runat="server"
>
</asp:ScriptManager>
<cc1:SliderExtender
ID="SliderExtender1"
runat="server"
TargetControlID="TextBox1"
BoundControlID="TextBox2"
Minimum="200"
Maximum="600"
>
</cc1:SliderExtender>
<br />
<table>
<tr>
<td>
<asp:TextBox
ID="TextBox1"
runat="server"
>
</asp:TextBox>
</td>
<td>
<asp:TextBox
ID="TextBox2"
runat="server"
ForeColor="Crimson"
Width="25"
>
</asp:TextBox>
</td>
<td>
<asp:LinkButton
ID="LinkButton1"
runat="server"
Text="Change Image Size"
ForeColor="DodgerBlue"
Font-Bold="true"
BorderColor="CornflowerBlue"
BorderWidth="1"
OnClick="LinkButton1_Click"
>
</asp:LinkButton>
</td>
</tr>
</table>
<br />
<asp:Image
ID="Image1"
runat="server"
ImageUrl="~/Images/Tiger.jpg"
Width="200"
/>
</div>
</form>
</body>
</html>