Show theme settings Shopping cart Download trialFree Trial
Change Theme Settings
Change Theme Settings
Show All Themes


  • Day 1 Day 1

The DevExpress ASP.NET Track Bar (ASPxTrackBar) allows you to display custom items instead of automatically generated scale marks. Populate the Items collection to activate the display mode of the ASPxTrackBar items. This collection can be filled manually or populated automatically by binding the editor to a data source. In item display mode, the MinValue/MaxValue, LargeTickInterval/SmallTickFrequency and Step properties are not in effect. Scale labels, tick marks and possible positions to which drag handles can be moved by end-users correspond directly to items from the Items collection. When an end-user selects an item, the item's index is assigned to the editor's Position (or PositionStart/PositionEnd) property.

For each item you can define the following:

The type of item values can be centrally specified via the editor's ValueType property (by default it is set to Decimal).

This demo illustrates how to use ASPxTrackBar client API to synchronize item selection with the display of the corresponding image. ASPxTrackBar and a standard Repeater (whose ItemTemplate contains an ASPxImage control in this demo) are bound to the same XML data file.

Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
Open CS Solution
Open VB Solution
The source code files for this demo are installed (by default) in the following directories:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\ASPxEditorsDemos
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\VB\ASPxEditorsDemos