Skip to main content
Tab

ASPxTrackBar.Direction Property

Gets or sets a value that defines the track bar direction.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v23.2.dll

NuGet Package: DevExpress.Web

Declaration

[DefaultValue(Direction.Normal)]
public Direction Direction { get; set; }

Property Value

Type Default Description
Direction Normal

One of the Direction enumeration values.

Available values:

Name Description
Reversed

An editor is displayed in the reversed direction: from right to left for horizontal orientation, and from bottom to top for vertical orientation.

Normal

An editor is located in the default (normal) direction: from left to right for horizontal orientation, and from top to bottom for vertical orientation.

Remarks

This property is a wrapper of the TrackBarProperties.Direction property.

Example

The code sample below demonstrates how you can use the ASPxTrackBar control in two ways. On the one hand, a user can easily choose the required value or item, on the other hand, you can show end-users the visual result of their actions.

In this example, an end-user can select a chemical element and see its melting point. Here we use two track bars. The first track bar is used to visualize melting points and looks like a thermometer scale. By design, an end-user cannot change its value directly, so the ASPxEdit.ReadOnly property for this track bar is enabled. The second track bar is used to select the required chemical element. All the defined elements are gathered to the ASPxTrackBar.Items collection. The ASPxClientTrackBar.PositionChanged event of the second track bar is handled to update the value of the first track bar.

The image below shows the result.

trackbar_example_thermometer

function OnPositionChanged(s, e) {
    updateItems(s);
}

function OnInit(s, e) {
    updateItems(s);
}

function updateItems(trackBar) {
    var trackBarValue = trackBar.GetValue();
    termometer.SetValue(trackBarValue);
}
See Also