Ajax Control Toolkit -- sliderextender (slide)

Minimum-Minimum value allowed. (minimum allowed values)

Maximum-maximum value allowed. (maximum value allowed)

Decimals-number of decimal digits for the value. (number of decimal places)

Steps-number of discrete values inside the Slider's range. (the default value is 0. The smaller the value, the larger the sliding range of the slider)

Value-current value of the slider. (the current value of the slider, but this attribute does not appear to be found)

Enablehandleanimation-enable/disable the handle animation. (use or disable the handle (slider) animation)

Handleanimationduration-Duration of the handle anmimation, in milliseconds. (duration of the handle animation, in milliseconds)

Railcssclass-CSS class for the Slider's rail)

Handlecssclass-CSS class for the Slider's handle. (handle CSS style)

Handleimageurl-URL of the image to display as the Slider's handle. (The image URL of the handle)

Length-width/height of a horizontal/vertical slider when the default layout is used. (the length or height of a slider is determined by its placement direction)

Boundcontrolid-ID of the textbox or label that dynamically displays the Slider's value. (Control ID that dynamically binds the slider value)

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.

{The difficulty of this control lies in CSS. It is not ideal to try it by yourself, so I did not write it down}

 1      <  ASP: scriptmanager  ID  = "Scriptmanager1" Runat  = "Server"     />  
  2     <  BR  />  
  3     <  ASP: textbox  ID  = "Sliderpolicboundcontrol" 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  = "Sliderpolicboundcontrol"  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 VoidPage_load (ObjectSender, eventargs E)
{
Scriptmanager1.registerasyncpostbackcontrol (slider2 );
If(Page. ispostback)
{
Lblupdatedate. Text= "Changed:" +Datetime. Now. tolongtimestring ();

}


}
 

Supplement:

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     }