ASP.NET AJAX Control Toolkit Demos
v20.1.0.0
Slider Sample
Samples
HOME
Accordion
AjaxFileUpload
AlwaysVisibleControl
Animation
AreaChart
AsyncFileUpload
AutoComplete
BalloonPopup
BarChart
BubbleChart
Calendar
CascadingDropDown
CollapsiblePanel
ColorPicker
ComboBox
ConfirmButton
DragPanel
DropDown
DropShadow
DynamicPopulate
FilteredTextBox
Gravatar
HoverMenu
HtmlEditorExtender
LineChart
ListSearch
MaskedEdit
ModalPopup
MultiHandleSlider
MutuallyExclusiveCheckBox
NoBot
NumericUpDown
PagingBulletedList
PasswordStrength
PieChart
PopupControl
Rating
ReorderList
ResizableControl
RoundedCorners
Seadragon
Slider
SlideShow
Tabs
TextBoxWatermark
ToggleButton
Twitter
UpdatePanelAnimation
ValidatorCallout
Slider Demonstration
Horizontal Slider ranging from -100 to +100 with 5 discrete values (5 steps), bound to a Label control. Changing the value will cause the Slider to trigger an update of the UpdatePanel that displays the current date and time.
Vertical Slider ranging from 0 to 100, bound to a TextBox. Clicking on the rail will cause the handle to slide with a nice animation effect.
Slider instance that is accessible. Its borders allow the slider's rail to be distinguished in high contrast mode. The TooltipText property on the slider's handle indicates the current value of the slider and what is actionable for the user when focus is set on that image. The value of the slider can be changed using the bound textbox so that it is completely usable without a mouse. Keyboard support for the Slider's handle is not in yet but will be available in the later Toolkit releases.
Slider instance using a decimal range from 0.1 to 1.0.
Slider Description
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.
Slider Properties
Properties
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
Slider Tips
TextBox visibility.
The asp:TextBox that the Slider is upgrading will be visible during the page loading, so it is usable if JavaScript is not enabled on the browser. Depending on your requirements, you can prevent the asp:TextBox from being visible by setting its display mode to "none".
Inline - Block.
While the TextBox is rendered as an inline element, the Slider will be rendered as a block element. Consider using floats or a table when designing that portion of layout. The CSS inline-block display mode is not supported by Internet Explorer 6.
CSS.
When using custom CSS classes for the Slider's rail and handle, it's recommended to specify positioning. The rail should have position:relative while the handle should have position:absolute.
If a CSS class for the slider's rail is provided, the developer can choose to provide a CSS class for the handle or the URL to an image to display as the handle.
Borders should be added to a wrapping <div>.