ASP.NET AJAX Control Toolkit Demos v20.1.0.0

MultiHandleSlider
Ajax Control Toolkit
MultiHandleSlider Demonstration

One Handle


A single-handled slider is still fully supported. This example borrows from the original 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.
0
Unchanged

Two Handles - Vertical


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.

Three Handles - Horizontal


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.

Two Handles - Custom


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.
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 values of the 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 the mouse and keyboard support for accessibility.
MultiHandleSlider Properties
Properties
  • BoundControlID - ID of a control to use for a single handle
  • ClientMultiHandleSliderTargets - The list of controls used to bind slider handle values. These should be Label or TextBox controls
  • CssClass - A master style to apply to slider graphical elements
  • Decimals - The number of decimal digits in a single slider's value
  • EnableHandleAnimation - Determines if the slider handles display of an animation effect when the position is changed
  • EnableInnerRangeDrag - Determines if the inner rail range can be dragged as a whole, moving both handles defining it
  • EnableKeyboard - Determines if the slider will respond to arrow keys when it has focus
  • EnableMouseWheel - Determines if the slider will respond to the mouse wheel when it has focus
  • EnableRailClick - Determines if clicking the rail will detect and move the closest handle
  • HandleAnimationDuration - Determines the total duration of an animation effect in seconds
  • HandleCssClass - A CSS class of a single handle
  • HandleImageUrl - URL for an image to display in the slider's handle
  • Increment - Determines the number of slider points to increment or decrement using the keyboard or mouse wheel. It is ignored if the steps property is used
  • InnerRailStyle - Determines how the inner rail style is handled
  • IsReadOnly - Determines if the slider and its values can be manipulated
  • IsServerControl - Determines if a control is server-side
  • Length - The slider rail length in pixels
  • Maximum - The highest value on the slider
  • Minimum - The lowest value on the slider
  • MultiHandleSliderTargets - The list of controls used to bind slider handle values. These should be Label or TextBox controls
  • OnClientDrag - An event raised when a user drags the slider
  • OnClientDragEnd - An event raised when a user drops the slider
  • OnClientDragStart - An event raised when a user initiates the drag operation on the slider
  • OnClientLoad - An event raised when the slider is completely loaded on the page
  • OnClientValueChanged - An event raised when the slider changes its state
  • Orientation - Determines if the slider's orientation is horizontal or vertical
  • RailCssClass - A CSS class for the slider's rail element
  • RaiseChangeOnlyOnMouseUp - Determines if changes events to the slider's values are raised during dragging. Otherwise, they are raised when dragging is completed
  • ShowHandleDragStyle - Determines if the slider handles will show a style effect when they are being dragged
  • ShowHandleHoverStyle - Determines if the slider handles will show a style effect when they are hovered over
  • ShowInnerRail - Determines if the slider will show an inner selected range rail. Otherwise, it will be displayed as a uniform rail
  • Steps - Determines the number of discrete locations on the slider. Otherwise, the slider is continous
  • TooltipText - Determines text to display as a tooltip; {0} denotes the current handle's value in the format string
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.
Copyright © 2012-2024 CodePlex Foundation. All Rights Reserved.