MultiHandleSlider Extender (demo)

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.

Properties

Name Description
BoundControlID ID of a control to use for a single handle Remarks: Only used as a backward-compatibility feature for users that wish to upgrade their existing controls. The server control should be a TextBox or Label control
CssClass A master style to apply to slider graphical elements
Decimals The number of decimal digits in a single slider's value Remarks: 0 means an integer value. Only used as a backward-compatibility feature for users wishing to upgrade their existing controls
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 Remarks: Only used as a backward-compatibility feature for users wishing to upgrade their existing controls
HandleImageUrl URL for an image to display in the slider's handle Remarks: Only used as a backward-compatibility feature for users wishing to upgrade their existing controls
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 Remarks: Only used as a backward-compatibility feature for users wishing to upgrade their existing controls
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

Client properties

boundControlID
ID of a control to use for a single handle
Getter name: get_boundControlID()
Setter name: set_boundControlID(value)

cssClass
A master style to apply to slider graphical elements
Getter name: get_cssClass()
Setter name: set_cssClass(value)

decimals
The number of decimal digits in a single slider's value
Getter name: get_decimals()
Setter name: set_decimals(value)

enableHandleAnimation
Determines if the slider handles display an animation effect when the position is changed
Getter name: get_enableHandleAnimation()
Setter name: set_enableHandleAnimation(value)

enableInnerRangeDrag
Determines if the inner rail range can be dragged as a whole moving both handles defining it
Getter name: get_enableInnerRangeDrag()
Setter name: set_enableInnerRangeDrag(value)

enableKeyboard
Determines if the slider will respond to arrow keys when it has focus
Getter name: get_enableKeyboard()
Setter name: set_enableKeyboard(value)

enableMouseWheel
Determines if the slider will respond to the mouse wheel when it has focus
Getter name: get_enableMouseWheel()
Setter name: set_enableMouseWheel(value)

enableRailClick
Determines if clicking the rail will detect and move the closest handle
Getter name: get_enableRailClick()
Setter name: set_enableRailClick(value)

handleAnimationDuration
Determines the total duration of the animation effect in seconds
Getter name: get_handleAnimationDuration()
Setter name: set_handleAnimationDuration(value)

handleCssClass
A CSS class of a single handle
Getter name: get_handleCssClass()
Setter name: set_handleCssClass(value)

handleImageUrl
URL for an image to display in the slider's handle
Getter name: get_handleImageUrl()
Setter name: set_handleImageUrl(value)

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
Getter name: get_increment()
Setter name: set_increment(value)

innerRailStyle
Determines how the inner rail style is handled
Getter name: get_innerRailStyle()
Setter name: set_innerRailStyle(value)

isReadOnly
Determines if the slider and its values can be manipulated
Getter name: get_isReadOnly()
Setter name: set_isReadOnly(value)

length
The slider rail length in pixels
Getter name: get_length()
Setter name: set_length(value)

maximum
The highest value on the slider
Getter name: get_maximum()
Setter name: set_maximum(value)

minimum
The lowest value on the slider
Getter name: get_minimum()
Setter name: set_minimum(value)

multiHandleSliderTargets
The list of controls used to bind slider handle values. These should be Label or TextBox controls
Getter name: get_multiHandleSliderTargets()
Setter name: set_multiHandleSliderTargets(value)

orientation
Determines if the slider's orientation is horizontal or vertical
Getter name: get_orientation()
Setter name: set_orientation(value)

railCssClass
A CSS class for the slider's rail element
Getter name: get_railCssClass()
Setter name: set_railCssClass(value)

raiseChangeOnlyOnMouseUp
Determines if changes events to the slider's values are raised during dragging. Otherwise, they are raised when dragging is completed
Getter name: get_raiseChangeOnlyOnMouseUp()
Setter name: set_raiseChangeOnlyOnMouseUp(value)

showHandleDragStyle
Determines if the slider handles will show a style effect when they are being dragged
Getter name: get_showHandleDragStyle()
Setter name: set_showHandleDragStyle(value)

showHandleHoverStyle
Determines if the slider handles will show a style effect when they are hovered over
Getter name: get_showHandleHoverStyle()
Setter name: set_showHandleHoverStyle(value)

showInnerRail
Determines if the slider will show an inner selected range rail. Otherwise, it will be displayed as a uniform rail
Getter name: get_showInnerRail()
Setter name: set_showInnerRail(value)

sliderInitialized
Determines whether or not this slider is initialized
Getter name: get_sliderInitialized()

steps
Determines the number of discrete locations on the slider. Otherwise, the slider is continous
Getter name: get_steps()
Setter name: set_steps(value)

tooltipText
Determines the text to display as a tooltip; {0} denotes the current handle's value in the format string
Getter name: get_tooltipText()
Setter name: set_tooltipText(value)

value
A value of a single bound control for backward compatibility of the existing slider and tests. Can be used only in this context
Getter name: get_value()
Setter name: set_value(value)

values
A list of all handle values as a comma-delimited string
Getter name: get_values()

Client methods

getValue(index)
Returns a value of a specific slider handle programmatically by index
Params:
  • index
    • Type: Number
    • Description: Handle index

onDrag()
Raises the OnDrag event

onDragEnd()
Raises the OnDragEnd event

onDragStart()
Raises the OnDragStart event

setValue(index, value)
Sets a value of a specific slider handle programmatically by index
Params:
  • index
    • Type: Number
    • Description: Handle index
  • value
    • Type: Number
    • Description: Value

Client events

drag
The event is raised when the user drags the slider
Add event handler method: add_drag(handler)
Remove event handler method: remove_drag(handler)

dragEnd
The event is raised when the user drops the slider
Add event handler method: add_dragEnd(handler)
Remove event handler method: remove_dragEnd(handler)

dragStart
The event is raised when a user initiates the drag operation on the slider
Add event handler method: add_dragStart(handler)
Remove event handler method: remove_dragStart(handler)

load
The event is raised when the slider is completely loaded on the page
Add event handler method: add_load(handler)
Remove event handler method: remove_load(handler)

valueChanged
The event is raised when the slider changes its state
Add event handler method: add_valueChanged(handler)
Remove event handler method: remove_valueChanged(handler)

Last edited Sep 14, 2015 at 10:02 AM by fadilmamedov, version 3