All docs
V18.2
20.2 (EAP/Beta)
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
18.1
17.2

Overview - TrackBar

TrackBar is a slider that provides end-users with fast and easy visual data selection capabilities.

Implementation Details

TrackBar is realized by the TrackBarExtension class. Its instance can be accessed via the ExtensionsFactory.TrackBar helper method, which is used to add a TrackBar extension to a view. This method's parameter provides access to the TrackBar's settings implemented by the TrackBarSettings class, allowing you to fully customize the extension.

TrackBar's client counterpart is represented by the ASPxClientTrackBar object.

Declaration

TrackBar can be added to a view in the following manner.

View code (ASPX):

<%    
    Html.DevExpress().TrackBar(
        settings => {
            settings.Name = "myTrackBar";
            settings.Properties.SmallTickFrequency = 5;
            settings.Properties.LargeTickInterval = 10;
            settings.Properties.MaxValue = 50;
            settings.Position = 10;
            settings.Properties.ScalePosition = ScalePosition.RightOrBottom;
        }
    )
    .Render();
%>

View code (Razor):

@Html.DevExpress().TrackBar(
     settings => {
          settings.Name = "myTrackBar";
          settings.Properties.SmallTickFrequency = 5;
          settings.Properties.LargeTickInterval = 10;
          settings.Properties.MaxValue = 50;
          settings.Position = 10;
          settings.Properties.ScalePosition = ScalePosition.RightOrBottom;
     }
).GetHtml()

The code result is demonstrated in the image below.

TrackBar_Over

See Also