Ajax Control Toolkit MultiHandleSlider

Modified on 2010/04/16 00:46 by Stephen Walther — Categorized as: Uncategorized

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.

MultiHandleSlider Server Properties

The properties in italics 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.

MultiHandleSlider Tips

TextBox visibility. The asp:TextBox that the MultiHandleSlider is upgrading will be visible during the page loading, so it is usable if JavaScript is not enabled on the browser. Depending on your requirements, you can prevent the asp:TextBox from being visible by setting its display mode to "none".
Inline - Block. While the TextBox is rendered as an inline element, the MultiHandleSlider will be rendered as a block element. Consider using floats or a table when designing that portion of the layout. The CSS inline-block display mode is not supported by Internet Explorer 6.
CSS. When using custom CSS classes for the MultiHandleSlider's rail and handles, it's recommended to specify positioning. The rail should have position:relative while the handle should have position:absolute. Also, ensure you set the z-order for handles higher than the rail so that they appear in front of the rail.