Back to Devexpress

TrackBar

aspnet-10725-aspnet-mvc-extensions-data-editors-extensions-trackbar.md

latest2.2 KB
Original Source

TrackBar

  • Aug 08, 2019
  • 3 minutes to read

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):

csharp
<%    
    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):

csharp
@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.

Main Features

  • Various Orientation and Direction

  • Single and Range Value Selection Modes

  • Items Mode Support

  • Full Scale and Layout Customization

  • Value Selection

  • Full-Featured Client-Side API