Slider:网页上的滑动条

 Slider扩展器控件可以将TextBox控件变成一个滑动条，让用户以鼠标拖动的方式输入某个范围内的值。
示例运行效果：

图(1)

图(2)

SliderDemo.aspx代码示例：

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="SliderDemo.aspx.cs" Inherits="Chapter08_SliderDemo"  %>


<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > Slider Demo </ title >
     < link  href ="stylesheet.css"  rel ="stylesheet"  type ="text/css"   />
     < style  type ="text/css" > ...
        .valueBox
        {...}{
            border:1px solid #555;
            width:30px;
            float:left;
        }
     </ style >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
         < asp:ScriptManager  ID ="sm"  runat ="server"   />
         < div  class ="demoheading" > 网页上的滑动条 </ div >
        请输入一个0-200之间的数字：
         < asp:TextBox  ID ="sliderValue"  CssClass ="valueBox"  runat ="server" ></ asp:TextBox >
         < asp:TextBox  ID ="slider"  runat ="server" ></ asp:TextBox >
         < ajaxToolkit:SliderExtender  ID ="se"  runat ="server"
            TargetControlID ="slider"  
            BoundControlID ="sliderValue"
            Minimum ="0"  
            Maximum ="200"
            Decimals ="1"
            Length ="200"
            EnableHandleAnimation ="true"   />
         <!--
            TargetControlID：该扩展器目标TextBox控件的ID，即将要被“升级”为滑动条的TextBox的ID
            BoundControlID：与该滑动条绑定的另一个TextBox或Label的ID。滑动条的当前值会显示在这个TextBox
                            或Label中。若该属性设置为某个TextBox，则修改该TextBox中的值也会反过来更新滑块
                            的位置。这也正是“绑定”的含义所在。
            Minimum：滑动范围的最小值
            Maximum：滑动范围的最大值
            Decimals：滑动条所能够选择的小数位数
            Steps：滑动条的最小增量
            Length：滑动条的高度(水平滑动条)或长度(垂直滑动条)
            Orientation：滑动条的方向，可选Horizontal(水平)和Vertical(垂直)
            HandleCssClass：滑块将应用的CSS Class
            HandleImageUrl：表示滑块的图片的URL
            RailCssClass：滑轨将应用的CSS Class
            EnableHandleAnimation：若该属性设置为true，则当用户手工修改该滑动条绑定的TextBox中的数值时，
                                   滑动将以动画的形式连续地移动到滑动条的相应位置。
         -->
     </ form >
</ body >
</ html >