Skip to content
This repository has been archived by the owner on Oct 14, 2024. It is now read-only.

MultiHandleSlider

MikhailTymchukDX edited this page Apr 29, 2016 · 2 revisions

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)

Clone this wiki locally