MultiHandleSliderExtender (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
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 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

Name	Description
boundControlID	ID of a control to use for a single handle
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 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 the 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
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
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
sliderInitialized	Determines whether or not this slider is initialized
steps	Determines the number of discrete locations on the slider. Otherwise, the slider is continous
tooltipText	Determines the text to display as a tooltip; {0} denotes the current handle's value in the format string
value	A value of a single bound control for backward compatibility of the existing slider and tests. Can be used only in this context
values	A list of all handle values as a comma-delimited string

Client methods

Name	Description
getValue(index)	Returns a value of a specific slider handle programmatically by 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

Client events

Name	Description
drag	The event is raised when the user drags the slider
dragEnd	The event is raised when the user drops the slider
dragStart	The event is raised when a user initiates the drag operation on the slider
load	The event is raised when the slider is completely loaded on the page
valueChanged	The event is raised when the slider changes its state

Client properties

sliderInitialized

Determines whether or not this slider is initialized

Remarks: For backward compatibility with the original slider

Getter name: get_sliderInitialized()

values

A list of all handle values as a comma-delimited string

Remarks: This is required for automated toolkit test behavior. Returns a comma-delimited string of handle values

Getter name: get_values()

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)

minimum

The lowest value on the slider

Getter name: get_minimum()Setter name: set_minimum(value)

maximum

The highest value on the slider

Getter name: get_maximum()Setter name: set_maximum(value)

length

The slider rail length in pixels

Getter name: get_length()Setter name: set_length(value)

steps

Determines the number of discrete locations on the slider. Otherwise, the slider is continous

Getter name: get_steps()Setter name: set_steps(value)

orientation

Determines if the slider's orientation is horizontal or vertical

Getter name: get_orientation()Setter name: set_orientation(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)

handleAnimationDuration

Determines the total duration of the animation effect in seconds

Getter name: get_handleAnimationDuration()Setter name: set_handleAnimationDuration(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)

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)

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)

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)

innerRailStyle

Determines how the inner rail style is handled

Getter name: get_innerRailStyle()Setter name: set_innerRailStyle(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)

enableRailClick

Determines if clicking the rail will detect and move the closest handle

Getter name: get_enableRailClick()Setter name: set_enableRailClick(value)

isReadOnly

Determines if the slider and its values can be manipulated

Getter name: get_isReadOnly()Setter name: set_isReadOnly(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)

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)

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)

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)

cssClass

A master style to apply to slider graphical elements

Getter name: get_cssClass()Setter name: set_cssClass(value)

boundControlID

ID of a control to use for a single handle

Getter name: get_boundControlID()Setter name: set_boundControlID(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)

railCssClass

A CSS class for the slider's rail element

Getter name: get_railCssClass()Setter name: set_railCssClass(value)

decimals

The number of decimal digits in a single slider's value

Getter name: get_decimals()Setter name: set_decimals(value)

Client methods

getValue(index)

Returns a value of a specific slider handle programmatically by index

Params:

• index
  • Type: Number
  • Description: Handle index

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

onDragStart()

Raises the OnDragStart event

onDrag()

Raises the OnDrag event

onDragEnd()

Raises the OnDragEnd event

Client events

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)

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)

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)

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)