Slider

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

Name	Description
boundControlID	ID of the TextBox or Label that dynamically displays the slider's value
clientState	A client state
decimals	A number of decimal digits for the value
dragDataType	A slider drag data type
dragMode	Slider drag mode
dropTargetElement	A slider drop target element
enableHandleAnimation	Enable/disable the handle animation
enableKeyboard	Determines if the slider will respond to arrow keys when it has focus
handleAnimationDuration	Duration of the handle animation
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 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
value	A slider current value

Client methods

Name	Description
getDragData()	Returns slider data
isSliderInitialized()	Determines whether the slider is initialized

Client events

Name	Description
slideEnd	Fires when sliding ends
sliderInitialized	Fires when the slider is initialized
slideStart	Fires when sliding starts
valueChanged	Fires when the slider value changes

Client properties

dragDataType

A slider drag data type

Getter name: get_dragDataType()

dragMode

Slider drag mode

Getter name: dragMode()

dropTargetElement

A slider drop target element

Getter name: get_dropTargetElement()

value

A slider current value

Getter name: get_value()
Setter name: set_value(value)

railCssClass

A CSS class for the slider's rail

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

handleImageUrl

The URL of an image to display as the slider's handle

Getter name: get_handleImageUrl()
Setter name: set_handleImageUrl(value)

handleCssClass

A CSS class for the slider's handle

Getter name: get_handleCssClass()
Setter name: set_handleCssClass(value)

minimum

Minimum value allowed

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

maximum

Maximum value allowed

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

orientation

Slider orientation

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

steps

A number of discrete values inside the slider's range

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

decimals

A number of decimal digits for the value

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

enableHandleAnimation

Enable/disable the handle animation

Getter name: get_enableHandleAnimation()
Setter name: set_enableHandleAnimation(value)

handleAnimationDuration

Duration of the handle animation

Getter name: get_handleAnimationDuration()
Setter name: set_handleAnimationDuration(value)

boundControlID

ID of the TextBox or Label that dynamically displays the slider's value

Getter name: get_boundControlID()
Setter name: set_boundControlID(value)

length

Width/height of a horizontal/vertical slider when the default layout is used

Getter name: get_length()
Setter name: set_length(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)

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

Getter name: get_tooltipText()
Setter name: set_tooltipText(value)

enableKeyboard

Determines if the slider will respond to arrow keys when it has focus

Getter name: get_enableKeyboard()
Setter name: set_enableKeyboard(value)

clientState

A client state

Getter name: get_clientState()
Setter name: set_clientState(value)

Client methods

getDragData()

Returns slider data

isSliderInitialized()

Determines whether the slider is initialized

Client events

sliderInitialized

Fires when the slider is initialized

Add event handler method: add_sliderInitialized(handler)
Remove event handler method: remove_sliderInitialized(handler)

valueChanged

Fires when the slider value changes

Add event handler method: add_valueChanged(handler)
Remove event handler method: remove_valueChanged(handler)

slideStart

Fires when sliding starts

Add event handler method: add_slideStart(handler)
Remove event handler method: remove_slideStart(handler)

slideEnd

Fires when sliding ends

Add event handler method: add_slideEnd(handler)
Remove event handler method: remove_slideEnd(handler)