How to use SliderExtender in asp.net ajax

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>
Related asp.net ajax examples