AJAX Control Toolkit —— SliderExtender(滑動條)

Minimum - Minimum value allowed.(允許的最小值)

Maximum - Maximum value allowed.(允許的最大值)

Decimals - Number of decimal digits for the value.(值的小數位元)

Steps(步幅) - Number of discrete values inside the slider's range.（預設值為0，值越小滑動的滑塊滑動的範圍就越大）

Value - Current value of the slider.(滑塊的當前值，但似乎沒有找到這個屬性)

EnableHandleAnimation - Enable/Disable the handle animation.(可用或禁用柄（滑塊）動畫)

HandleAnimationDuration - Duration of the handle anmimation,in milliseconds.(柄動畫的期間，單位毫秒)

RailCssClass - CSS Class for the slider's rail.(滑軌CSS樣式，CSS中必須指定高寬)

HandleCssClass - CSS Class for the slider's handle.(手柄CSS樣式)

HandleImageURl - URL of the image to display as the slider's handle.(手柄的映像URL)

Length- Width/height of a horizontal/vertical slider when the default layout is used.（Slider的長或高根據其放置方向決定）

BoundControlID - ID of the TextBox or Label that dynamically displays the Slider's value.(動態綁定滑塊值的控制項ID)

RaiseChangeOnlyOnMouseUp - If true,fires the change event on the extended TextBox only when the left mouse button is released.

TooltipText - Text to display in tooltip when the handle is hovered.The {0} Placeholder in the text is replaced with the current value of the slider.

｛該控制項的痛點在於CSS，自己試了試不是很理想，所以就沒有往下寫｝

 1  <asp:ScriptManager ID="ScriptManager1" runat="server" />
 2     <br />
 3     <asp:TextBox ID="Slider1_BoundControl" runat="server" Width="30" /><br />
 4     <asp:TextBox ID="Slider1" runat="server" />
 5     <br />
 6     <br />
 7     <asp:TextBox ID="Slider2" runat="server" AutoPostBack="true" Text="0" />
 8     <asp:Label ID="Slider2_BoundControl" runat="server" /><br />
 9     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
10         <ContentTemplate>
11             <asp:Label ID="lblUpdateDate" runat="server" Style="font-size: 80%;" Text="&nbsp;" />
12         </ContentTemplate>
13         <Triggers>
14             <asp:AsyncPostBackTrigger ControlID="Slider2" EventName="TextChanged" />
15         </Triggers>
16     </asp:UpdatePanel>
17     <br />
18     <asp:TextBox ID="MySlider_BoundControl" runat="server" Height="21px" 
19         Width="47px"></asp:TextBox>
20     <asp:TextBox ID="MySlider" runat="server"></asp:TextBox>
21     <ajaxToolkit:SliderExtender ID="SliderExtender3" TargetControlID="MySlider" BoundControlID="MySlider_BoundControl"
22         Orientation="Vertical" BehaviorID="MySlider" Decimals="2" runat="server"  EnableHandleAnimation="true" TooltipText="Select a value"
23       
24         >
25     </ajaxToolkit:SliderExtender>
26     <ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" BehaviorID="Slider1"
27         TargetControlID="Slider1" BoundControlID="Slider1_BoundControl" Orientation="Vertical"
28         EnableHandleAnimation="true" />
29     <ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server" BehaviorID="Slider2"
30         TargetControlID="Slider2" Minimum="-100" Maximum="100" BoundControlID="Slider2_BoundControl"
31         Steps="10" />

　　

  protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(Slider2);
if (Page.IsPostBack)
        {
            lblUpdateDate.Text = "Changed at : " + DateTime.Now.ToLongTimeString();

        }


    }

補充：

 1   .sliderrail
 2 {
 3    position:relative;
 4    background-image:url(sliderrail.gif);
 5    height:22px;
 6    width:150px;
 7 }
 8 
 9 .sliderhandle
10 {
11    position:absolute;
12    background-image:url(slidehandle.gif);
13    height:22px;
14    width:10px;
15 }