Skip to main content
Tab

ASPxTrackBar Class

A slider editor.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.1.dll

NuGet Package: DevExpress.Web

Declaration

public class ASPxTrackBar :
    ASPxEdit,
    IEditDataHelperOwner,
    IValueTypeHolder,
    IControlDesigner

Remarks

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

Create a Track Bar

Design Time

The ASPxTrackBar control is available on the DX.24.1: Common Controls toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize the control’s settings, or paste the control’s markup in the page’s source code.

<dx:ASPxTrackBar runat="server" ID="trackBar" AllowRangeSelection="true" ScalePosition="LeftOrTop" 
    ValueToolTipPosition="RightOrBottom" Orientation="Vertical" ClientInstanceName="ClientTrackBar">
    <Items>
        <dx:TrackBarItem Text="Item1" Value="1" />
        <dx:TrackBarItem Text="Item2" Value="2" />
        <dx:TrackBarItem Text="Item3" Value="3" />
        <dx:TrackBarItem Text="Item4" Value="4" />
    </Items>
</dx:ASPxTrackBar>

Run Time

using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)
{
    ASPxTrackBar trackBar = new ASPxTrackBar();
    trackBar.ID = "trackBar";
    Page.Form.Controls.Add(trackBar);

    trackBar.ClientInstanceName = "ClientTrackBar";
    trackBar.AllowRangeSelection = true;
    trackBar.ScalePosition = ScalePosition.LeftOrTop;
    trackBar.Orientation = Orientation.Vertical;
    trackBar.ValueToolTipPosition = ValueToolTipPosition.RightOrBottom;
    trackBar.Items.AddRange(new List<TrackBarItem>() {
        new TrackBarItem { Text = "Item1", Value = 1},
        new TrackBarItem { Text = "Item2", Value = 2},
        new TrackBarItem { Text = "Item3", Value = 3},
        new TrackBarItem { Text = "Item4", Value = 4},
    });
}

Note

DevExpress controls require that you register special modules, handlers, and options in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.

End-users can select a value within the ASPxTrackBar by positioning a drag handle. The minimum distance the drag handle can be moved is determined via the ASPxTrackBar.Step property.

By default, a track bar is a slider with scale range from 0 up to 100. You can change limits of the range of values by the ASPxTrackBar.MinValue and ASPxTrackBar.MaxValue properties.

You can populate the ASPxTrackBar.Items collection to create custom track bar items (TrackBarItem). You can specify an item’s display text (TrackBarItem.Text), value (TrackBarItem.Value), and tooltip (TrackBarItem.ToolTip).

Additionally the ASPxTrackBar control can be bound to a data source by using the ASPxTrackBar.DataSource or ASPxTrackBar.DataSourceID property. You can specify which data source fields the item information (text, value, and tooltip) should be retrieved from. In this case, the Items collection is not in effect.

The current position of the drag handle is specified via the ASPxTrackBar.Position property. If the ASPxTrackBar.AllowRangeSelection property is set to true, ASPxTrackBar displays two drag handles to support the value range selection. The position of the main and secondary drag handles is specified via the ASPxTrackBar.PositionStart and ASPxTrackBar.PositionEnd properties respectively.

The appearance and functionality of the ASPxTrackBar control can be customized in different ways:

TrackBar_Over

Note

The client-side equivalent of this editor control is represented by the ASPxClientTrackBar object. The editor’s client-side API is enabled if the ASPxEditBase.EnableClientSideAPI property is set to true, or the ASPxEditBase.ClientInstanceName property is defined, or any client event is handled. Available client events can be accessed via the ASPxTrackBar.ClientSideEvents property.

See Also