Slider(滑片) 控件

功能：
    扩展允许我们为一个TextBox控件，升级成一个图形化的滑动杆，让用户通过鼠标拖拽调整把柄，或是直接在滑动
轨道上单击鼠标左键，便可在最小和最大值之间，来设置数值。

属性：
     TargetControlID ：要被"滑片"扩展器所控制的ASP.NET TextBox控件ID。
     Minimum ："滑杆"的最小值，默认值为0。
     Maximum ："滑杆"的最大值，默认值为100。
     Steps ：数值的递增值。
     Orientation ："滑片"的走向。可以指定"Vertical"垂直方向及"Horizontal"水平方向。
     EnableHandleAnimation ：启用或关闭调整把柄的动画效果。
     Length ：指定"滑片"的宽度或高度。
     HandleCssClass ：嵌套用到调整把柄的样式表。
     RailCssClass ：嵌套用到滑动轨道的样式表。
     BoundControlID ：用来动态显示结果的ASP.NET TextBox或Label控件。
     RaiseChangeOnlyOnMouseUp ：为"True"时，唯有位于"滑片"的调整把柄上，放开鼠标左鍵时，才会触发更新事件，默认为"True"。
代码实例：
Aspx页面

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <table>
            <tr>
                <td></td>
                <td></td>
                <td>请移动滑片来调整图片的宽度</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>
                    <asp:TextBox ID="txtWidth" runat="server" AutoPostBack="True"
                        CssClass="cssSliderText"></asp:TextBox>
                    <asp:Label ID="lblWidth" runat="server"></asp:Label>像素
                    <ajaxToolkit:SliderExtender ID="seWidth" runat="server"
                        TargetControlID="txtWidth"
                        Minimum="10"
                        Maximum="600"
                        Steps="10"
                        Orientation="Horizontal"
                        EnableHandleAnimation="true"
                        Length="200"
                        HandleCssClass="cssHandleH2"
                        RailCssClass="cssRailH2"
                        BoundControlID="lblWidth"
                        RaiseChangeOnlyOnMouseUp="false">
                    </ajaxToolkit:SliderExtender>
                </td>
            </tr>
            <tr>
                <td width="20px" valign="top">
                    请移动滑片来调整图片的高度
                </td>
                <td width="30px" vAlign="top">
                    <asp:TextBox ID="txtHeight" runat="server" AutoPostBack="True"
                        CssClass="cssSliderText"></asp:TextBox>
                    <asp:Label ID="lblHeight" runat="server"></asp:Label>像素
                    <ajaxToolkit:SliderExtender ID="seHeight" runat="server"
                        TargetControlID="txtHeight"
                        Minimum="10"
                        Maximum="800"
                        Steps="5"
                        Orientation="Vertical"
                        EnableHandleAnimation="true"
                        Length="200"
                        HandleCssClass="cssHandleV2"
                        RailCssClass="cssRailV2"
                        BoundControlID="lblHeight"
                        RaiseChangeOnlyOnMouseUp="false">
                    </ajaxToolkit:SliderExtender>
                </td>                
                <td vAlign="top">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:Image ID="imgBook" runat="server" ImageUrl="~/Images/AJAX.gif" Height="50%" Width="50%" />
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="txtHeight" EventName="TextChanged" />
                            <asp:AsyncPostBackTrigger ControlID="txtWidth" EventName="TextChanged" />
                        </Triggers>
                    </asp:UpdatePanel>                            
                </td>
            </tr>
        </table>
    </div>    
    </form>

后台代码：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            this.imgBook.Height = Int32.Parse(this.txtHeight.Text);
            this.imgBook.Width = Int32.Parse(this.txtWidth.Text);           
        }
    }

运行结果：