The Slider extender allows to upgrade an asp:TextBox to a graphical slider that allows the user
to choose a numeric value from a finite range. The Slider's orientation can be horizontal or
vertical and it can also act as a "discrete" slider, allowing only a specified number of values
within its range.
If the developer doesn't specify any parameters, the Slider is rendered with the default layout
shown in the demonstration and its range of values goes from 0 to 100. The Slider's layout can be
customized by providing CSS classes for the Slider's rail and handle. If handle animation is enabled,
the handle slides to the specified point on the rail with a nice animation effect.
When a value is chosen using the Slider, it is automatically persisted during full or partial
postbacks. The developer can continue to reference the asp:TextBox to get and set the Slider's value.
The Slider's value can be dynamically displayed in another asp:TextBox or an asp:Label. If a TextBox
is used, the Slider's value can be updated through the bound TextBox.
By declaring the extended TextBox as a trigger for an UpdatePanel, the Slider can fire the update
whenever the handle is released. By setting the RaiseChangeOnlyOnMouseUp to false, the update will be
fired as soon as the Slider's value changes.
The controls above are initialized with this code. The italic properties
are optional:
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server"
TargetControlID="Slider1"
Minimum="-100"
Maximum="100"
BoundControlID="Slider1_BoundControl"
Steps="5" />
<ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server"
TargetControlID="Slider2"
BoundControlID="Slider2_BoundControl"
Orientation="Vertical"
EnableHandleAnimation="true" />
- 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.
- Value - Current value of the slider
- EnableHandleAnimation - Enable/disable the handle animation.
- HandleAnimationDuration - Duration of the handle animation, in milliseconds.
- RailCssClass - CSS class for the slider's rail.
- HandleCssClass - CSS class for the slider's handle.
- HandleImageURL - URL of the image to display as the slider's handle.
- Length - Width/height of a horizontal/vertical slider when the default layout is used.
- BoundControlID - ID of the TextBox or Label that dynamically displays the slider's value.
- RaiseChangeOnlyOnMouseUp - If true, fires the change event on the extended TextBox only when the left mouse button is released.