Slider Extender (demo)

The Slider extender allows upgrading an asp:TextBox to a graphical slider that allows a user to choose a numeric value from a finite range.
By declaring the extended TextBox as a trigger for an UpdatePanel, the Slider can fire the update whenever the handle is released. By setting RaiseChangeOnlyOnMouseUp to false, the update will be fired as soon as the Slider's value changes. The TooltipText property allows displaying some text when the mouse pointer hovers the slider's handle. A {0} placeholder in the text is replaced by the current value of the slider.

Properties

Name Description
BoundControlID ID of the TextBox or Label that dynamically displays the slider's value
Decimals A number of decimal digits for the value
EnableHandleAnimation Enable/disable the handle animation
EnableKeyboard Determines if the slider responds to arrow keys when it has focus
HandleCssClass A CSS class for the slider's handle
HandleImageUrl The URL of an image to display as the slider's handle
Length Width/height of a horizontal/vertical slider when the default layout is used
Maximum Maximum value allowed
Minimum Minimum value allowed
Orientation Slider orientation
RailCssClass A CSS class for the slider's rail
RaiseChangeOnlyOnMouseUp If true, fires the change event on the extended TextBox only when the left mouse button is released
Steps A number of discrete values inside the slider's range
TooltipText Text to display in a tooltip when the handle is hovered Remarks: The {0} placeholder in the text is replaced with the current value of the slider

Client properties

boundControlID
ID of the TextBox or Label that dynamically displays the slider's value
Getter name: get_boundControlID()
Setter name: set_boundControlID(value)

clientState
A client state
Getter name: get_clientState()
Setter name: set_clientState(value)

decimals
A number of decimal digits for the value
Getter name: get_decimals()
Setter name: set_decimals(value)

dragDataType
A slider drag data type
Getter name: get_dragDataType()

dragMode
Slider dra mode
Getter name: dragMode()

dropTargetElement
A slider drop target element
Getter name: get_dropTargetElement()

enableHandleAnimation
Enable/disable the handle animation
Getter name: get_enableHandleAnimation()
Setter name: set_enableHandleAnimation(value)

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

handleAnimationDuration
Duration of the handle animation
Getter name: get_handleAnimationDuration()
Setter name: set_handleAnimationDuration(value)

handleCssClass
A CSS class for the slider's handle
Getter name: get_handleCssClass()
Setter name: set_handleCssClass(value)

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

length
Width/height of a horizontal/vertical slider when the default layout is used
Getter name: get_length()
Setter name: set_length(value)

maximum
Maximum value allowed
Getter name: get_maximum()
Setter name: set_maximum(value)

minimum
Minimum value allowed
Getter name: get_minimum()
Setter name: set_minimum(value)

orientation
Slider orientation
Getter name: get_orientation()
Setter name: set_orientation(value)

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

raiseChangeOnlyOnMouseUp
If true, fires the change event on the extended TextBox only when the left mouse button is released mouse button is released
Getter name: get_raiseChangeOnlyOnMouseUp()
Setter name: set_raiseChangeOnlyOnMouseUp(value)

steps
A number of discrete values inside the slider's range
Getter name: get_steps()
Setter name: set_steps(value)

tooltipText
Text to display in a tooltip when the handle is hovered
Getter name: get_tooltipText()
Setter name: set_tooltipText(value)

value
A slider current value
Getter name: get_value()
Setter name: set_value(value)

Client methods

getDragData()
Returns slider data

isSliderInitialized()
Determines whether the slider is initialized

Client events

slideEnd
Fires when sliding ends
Add event handler method: add_slideEnd(handler)
Remove event handler method: remove_slideEnd(handler)

sliderInitialized
Fires when the slider is initialized
Add event handler method: add_sliderInitialized(handler)
Remove event handler method: remove_sliderInitialized(handler)

slideStart
Fires when sliding starts
Add event handler method: add_slideStart(handler)
Remove event handler method: remove_slideStart(handler)

valueChanged
Fires when the slider value changes
Add event handler method: add_valueChanged(handler)
Remove event handler method: remove_valueChanged(handler)

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