Tuesday, November 8, 2011
HOW TO Use the MultiHandleSlider Control
MultiHandleSlider Description
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.
NO VIDEO
MultiHandleSlider Client Code Sample
NO CLIENT SIDE SAMPLEMultiHandleSlider Client Properties
MultiHandleSlider Server Code Sample
<table style="margin:auto">
<%-- Demonstration One --%>
<tr>
<td style="width:250px;float:left;">
<h3>One Handle</h3>
<br />
A single-handled slider is still fully supported.This example borrows from the original
<asp:HyperLink ID="lnkSlider" runat="server" NavigateUrl="~/Slider/Slider.aspx"
Text="Slider" />
implementation, showing a horizontal slider ranging from -100 to +100 with 5 discrete steps in between, bound to an asp:Label control. The example is set up to trigger a postback when the asp:Label's value
changes.
</td>
<td style="width:205px;">
<table>
<tr>
<td style="width:140px;">
<asp:TextBox ID="sliderOne" runat="server" AutoPostBack="true" Text="0"/>
<ajaxToolkit:MultiHandleSliderExtender ID="multiHandleSliderExtenderOne" runat="server"
BehaviorID="multiHandleSliderExtenderOne"
TargetControlID="sliderOne"
Minimum="-100"
Maximum="100"
Steps="5"
Length="140"
BoundControlID="lblSliderOne"
ToolTipText="{0}">
</ajaxToolkit:MultiHandleSliderExtender>
</td>
<td style="width:15px"></td>
<td style="width:auto">
<asp:Label ID="lblSliderOne" runat="server" style="text-align:right" Text="0" />
</td>
</tr>
<tr>
<td colspan="3">
<div style="padding-top:25px;text-align:center">
<asp:UpdatePanel ID="updatePanelOne" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblUpdateDate" runat="server" style="font-size:80%;" Text="Unchanged" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="sliderOne" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</td>
</tr>
</table>
</td>
</tr>
<%-- Demonstration Two --%>
<tr>
<td style="height:175px;width:205px;" valign="top">
<br />
<h3>Two Handles - Vertical</h3>
<br />
This vertical slider has multiple handles and uses drag and hover effects. It also
supports animation. Clicking on the outer rail will move the closest handle.
</td>
<td style="height:175px;width:205px;" valign="top">
<table>
<tr valign="middle">
<td>
<asp:TextBox ID="multiHandle2_1_BoundControl" runat="server" Width="30" Text="25" />
</td>
<td valign="top">
<asp:TextBox ID="sliderTwo" runat="server" Style="display:none;" />
<ajaxToolkit:MultiHandleSliderExtender ID="multiHandleSliderExtenderTwo" runat="server"
BehaviorID="multiHandleSliderExtenderTwo"
TargetControlID="sliderTwo"
Minimum="0"
Maximum="100"
Length="175"
TooltipText="{0}"
Orientation="Vertical"
EnableHandleAnimation="true"
EnableKeyboard="false"
EnableMouseWheel="false"
ShowHandleDragStyle="true"
ShowHandleHoverStyle="true">
<MultiHandleSliderTargets>
<ajaxToolkit:MultiHandleSliderTarget ControlID="multiHandle2_1_BoundControl" />
<ajaxToolkit:MultiHandleSliderTarget ControlID="multiHandle2_2_BoundControl" />
</MultiHandleSliderTargets>
</ajaxToolkit:MultiHandleSliderExtender>
</td>
<td style="padding-left:21px">
<asp:TextBox ID="multiHandle2_2_BoundControl" runat="server" Width="30" Text="75" />
</td>
</tr>
</table>
</td>
</tr>
<%-- Demonstration Three --%>
<tr>
<td colspan="2" style="height:130px;" valign="middle">
<h3>Three Handles - Horizontal</h3><br />
This slider has three handles, showing that you can declare as many handles as fit
your needs. It also demonstrates visibly distinguishing the inner range from the outer rail.
</td>
</tr>
<tr valign="top">
<td>
<asp:TextBox ID="multiHandle3_1_BoundControl" runat="server" Text="25" Style="display:none;" />
<asp:TextBox ID="multiHandle3_2_BoundControl" runat="server" Text="50" Style="display:none;" />
<asp:TextBox ID="multiHandle3_3_BoundControl" runat="server" Text="75" Style="display:none;" />
<asp:TextBox ID="sliderThree" runat="server" Style="display:none;" />
<ajaxToolkit:MultiHandleSliderExtender ID="multiSliderExtenderThree" runat="server"
BehaviorID="multiSliderExtenderThree"
TargetControlID="sliderThree"
Minimum="0"
Maximum="100"
Length="450"
EnableHandleAnimation="true"
EnableKeyboard="false"
EnableMouseWheel="false"
ShowInnerRail="true"
ShowHandleDragStyle="true"
ShowHandleHoverStyle="true">
<MultiHandleSliderTargets>
<ajaxToolkit:MultiHandleSliderTarget ControlID="multiHandle3_1_BoundControl" />
<ajaxToolkit:MultiHandleSliderTarget ControlID="multiHandle3_2_BoundControl" />
<ajaxToolkit:MultiHandleSliderTarget ControlID="multiHandle3_3_BoundControl" />
</MultiHandleSliderTargets>
</ajaxToolkit:MultiHandleSliderExtender>
</td>
</tr>
<%-- Demonstration Four --%>
<tr style="height:180px;" valign="middle">
<td colspan="2">
<br /><h3>Two Handles - Custom</h3><br />
This dual slider demonstrates how you can use sliding doors custom styling to achieve
a popular slider skin effect, where the inner range is visibly contrasted against the
selectable total range. You can drag between the two slider handles to move the entire
inner range, and use the arrow keys or mouse wheel while hovering over the slider to
change its values.
</td>
</tr>
<tr>
<td style="padding-left:65px;" valign="top">
<table>
<tr>
<td>
<asp:TextBox ID="multiHandle4_1_BoundControl" runat="server" Text="25" Style="display:none;" />
<asp:TextBox ID="multiHandle4_2_BoundControl" runat="server" Text="75" Style="display:none;" />
</td>
<td style="width:140px;height:25px;" valign="top">
<asp:TextBox ID="sliderFour" runat="server" Style="display:none;" />
<ajaxToolkit:MultiHandleSliderExtender ID="multiSliderExtenderFour" runat="server"
BehaviorID="multiSliderExtenderFour"
TargetControlID="sliderFour"
Minimum="0"
Maximum="100"
Length="300"
EnableHandleAnimation="true"
ShowInnerRail="true"
EnableInnerRangeDrag="true"
InnerRailStyle="SlidingDoors"
CssClass="ajax__multi_slider_custom"
Increment="4">
<MultiHandleSliderTargets>
<ajaxToolkit:MultiHandleSliderTarget
ControlID="multiHandle4_1_BoundControl"
HandleCssClass="handle_horizontal_left"
Offset="6"/>
<ajaxToolkit:MultiHandleSliderTarget
ControlID="multiHandle4_2_BoundControl"
HandleCssClass="handle_horizontal_right"
Offset="-6" />
</MultiHandleSliderTargets>
</ajaxToolkit:MultiHandleSliderExtender>
</td>
</tr>
</table>
</td>
</tr>
</table>
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.
