The MultiHandleSlider extender provides a feature-rich extension to a regular asp:Textbox control. It allows
you to choose a single value, or multiple values in a range, through a graphical slider interface. It supports
one handle, dual handles, or any number of handles bound to the values of asp:TextBox or asp:Label controls.
It also provides options for read-only access, custom graphic styling, hover and drag handle styles, as well
as mouse and keyboard support for accessibility.
Much of the MultiHandleSlider's design is based on the original Slider, so you may want to review
the advice and design suggestions offered by the demonstration page of that extender. For example,
the MultiHandleSlider retains the same ToolTip functionality as the original Slider.
By declaring the extended TextBox as a trigger for an UpdatePanel, the MultiHandleSlider can raise the update
event whenever the handle is released. By setting the RaiseChangeOnlyOnMouseUp property to false, the update
is raised as soon as the MultiHandleSlider's value changes.
The first example above is initialized with this code. The italic properties are optional:
<ajaxToolkit:MultiHandleSlider ID="multiHandleSliderExtenderOne"
runat="server"
TargetControlID="sliderOne"
BehaviorID="multiHandleSliderOne"
BoundControlID="lblSliderOne"
Minimum="-100"
Maximum="100"
Steps="5"
Length="100"
ToolTipText="{0}"/>
- Minimum - Minimum value allowed.
- Maximum - Maximum value allowed.
- Length - The length of the graphical slider, in pixels.
- Decimals - Number of decimal digits for the value.
- Steps - Number of discrete values inside the slider's range.
- Orientation - Determines if the slider's orientation is horizontal or vertical.
- CssClass - The master style to apply to slider graphical elements.
- EnableHandleAnimation - If true, clicking on the rail to move a handle will animate the handle's movements.
- EnableRailClick - Whether clicking on the rail will move the closest handle to the click location.
- EnableInnerRangeDrag - For sliders with multiple handles; determines whether clicking an dragging the rail between two handles moves both handles simultaneously.
- EnableKeyboard - Whether slider values can be changed using the keyboard.
- EnableMouseWheel - Whether slider values can be changed using the mouse wheel.
- ShowInnerRail - For sliders with multiple handles; determines whether to display an inner range style between handles.
- ShowHandleHoverStyle - Whether to display an alternate CSS style when the user is hovering over a handle.
- ShowHandleDragStyle - Whether to display an alternate CSS style when the user is dragging a handle.
- InnerRailStyle - For sliders with multiple handles and custom styles; determines how to render the InnerRailCss, as it is described, or using the sliding doors image approach.
- ReadOnly - Whether the user can change the rail's values.
- Increment - For sliders using keyboard or mouse wheel support; determines the number of points to increment or decrement the slider values.
- HandleAnimationDuration - Duration of the handle animation, in seconds.
- BoundControlID - For backwards compatibility, allows using classic Slider properties for a single handle.
- HandleCssClass - For backwards compatibility, specifies the style of the single handle.
- RaiseChangeOnlyOnMouseUp - If true, fires the change event on the
extended TextBox only when the left mouse button is released.
- TooltipText - Text to display in a tooltip when the handle is hovered. The
{0} placeholder in the text is replaced with the current value of the slider.
- Events
- OnClientLoad - The event raised when the slider is initialized.
- OnClientDragStart - The event raised when the user starts dragging a handle.
- OnClientDrag - The event raised when the user drags the handle.
- OnClientDragEnd - The event raised when the user stops dragging the handle.
- OnClientValueChanged - The event raised when a handle value changes.
- MultiHandleSliderTargets - An inner property describing each handle on the slider.
- ControlID - The TextBox or Label whose value is bound to this handle.
- HandleCssClass - For sliders with custom styling; the CSS class used to style the handle.
- HandleHoverCssClass - For sliders with custom styling and hover effects; the CSS class used when the user is hovering over the handle.
- HandleDragCssClass - For sliders with custom styling and drag effects; the CSS class used when the user is dragging the handle.
- DecimalPlaces - The number of decimal places to format the bound control's value.
- Offset - For sliders with custom styling and inner rails; sets the pixel offset where the inner rail begins, for handles that use transparency.