Track Bar is a slider that provides end-users with fast and easy visual data selection capabilities. With TrackBar, end-users can select single values or value ranges by positioning drag handles within a span of values limited by a developer. End-users can position a drag handle over the required editor value in the following manner:
- By clicking on the track or scale,
- By clicking on decrement or increment buttons,
- Via the mouse wheel,
- By dragging the handle and dropping it on the required position,
- By pressing arrow keys.
This demo illustrates the primary features of TrackBar.
Value limits and position
You can define a value range to be visualized in TrackBar (within which end-users are allowed to select values) by specifying the minimum and maximum limits via the Properties.MinValue and Properties.MaxValue properties. The current editor value (that is the drag handle position) can be controlled by using the Position property.
TrackBar's scale visualizes a value span limited by the Properties.MinValue and Properties.MaxValue properties. The scale is fully customizable. You can display it on both sides of the track or just on one track side, or even hide the scale - via the Properties.ScalePosition property. The scale can display tick marks (large and small) and their labels (scale labels). Using the Properties.LargeTickInterval and Properties.SmallTickFrequency properties you can flexibly define the interval between large ticks and specify how frequently small ticks should fill a single large interval, respectively. You can also control whether or not all tick marks should be of the same size, by using the Properties.EqualTickMarks property.
Within TrackBar, you can display custom items instead of automatically generated scale marks. Populate the Properties.Items collection to activate TrackBar's items display mode. This collection can be filled manually or populated automatically through binding the editor to a data source. For each item, the text and associated value can be defined (via the Text and Value properties). You can specify the type of item values by using the editor's Properties.ValueType property. Items from the Properties.Items collection define the possible positions to which end-users can move drag handles within TrackBar. When an end-user selects an item, the item's index is assigned to the editor's Position property.
TrackBar supports a range selection mode. The editor can display two draggable handles, thus allowing end-users to easily select a range of values. Range selection is allowed if the Properties.AllowRangeSelection property is enabled. In this mode, you can use the PositionStart and PositionEnd properties to obtain or define the selected range limits.
Orientation and direction
Track bar supports two orientation modes - horizontal and vertical. This can be specified via the Properties.Orientation property. TrackBar elements can be rendered in a normal or reversed mode that is controlled by the Properties.Direction property. In the reversed mode, the TrackBar direction (from Properties.MinValue to Properties.MaxValue) turns from left to right to right to left (or from up to down to down to up if TrackBar's orientation is vertical).
When an end-user changes the editor value, TrackBar is able to automatically display a tooltip indicating the current value (or value range). You can control the visibility of value tooltips and even define at which track bar side they should appear, by using the Properties.ValueToolTipPosition property. The value tooltip text content's format is fully customizable through the Properties.ValueToolTipFormatString property.
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).
The source code files for this demo are installed (by default) in the following directory:
Open CS Solution
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxDataEditorsDemos