The DevExpress ASP.NET Track Bar (ASPxTrackBar) is a slider control that provides end-users with fast and easy visual data selection capabilities. End-users can select a value within ASPxTrackBar by positioning the handle within a range of values limited by a developer (using MinValue and MaxValue). The handle position can be changed in the following manner:
- By clicking on the track or scale;
- By clicking on decrement and increment buttons;
- Via the mouse wheel;
- By dragging the handle and dropping it on the required position;
- By pressing the arrow keys.
This demo illustrates the primary features of ASPxTrackBar.
Orientation and direction:
ASPxTrackBar supports two orientation modes that can be specified with the Orientation property: horizontal and vertical. The default orientation is horizontal. ASPxTrackBar can be displayed in normal or reversed mode. The mode is controlled by the Direction property. In reversed mode, the ASPxTrackBar direction (from MinValue to MaxValue) changes from left to right to right to left (or from up to down to down to up, if it is in vertical orientation mode).
Scale customization:
The scale is the rectangular area in which tick marks and scale labels are placed. You can use the ScalePosition property to specify where the scale can be displayed: on both sides along the track, or on only one side. The ScaleLabelHighlightMode property allows you to define how scale labels should be highlighted. Using the ValueToolTipPosition property, you can define the position where a value tooltip will appear when the drag handle position is changed.
Element visibility and appearance:
You can hide some elements of the track bar. Disabling the ShowDragHandles and ShowChangeButtons properties hides the drag handle and increment/decrement buttons, respectively. The EqualTickMarks property allows you to specify whether or not all tick marks should be of the same size.
In this demo, you can see how different settings affect editor behavior and appearance.