ASPxTrackBar Class

A slider editor.

Assembly: DevExpress.Web.v23.2.dll

Declaration

C#
VB.NET

public class ASPxTrackBar :
    ASPxEdit,
    IEditDataHelperOwner,
    IValueTypeHolder,
    IControlDesigner

Public Class ASPxTrackBar
    Inherits ASPxEdit
    Implements 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.23.2: 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.

ASPX

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

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},
    });
}

Imports DevExpress.Web

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim trackBar As ASPxTrackBar = 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(Of TrackBarItem)() From {
        New TrackBarItem With {
            .Text = "Item1",
            .Value = 1
        },
        New TrackBarItem With {
            .Text = "Item2",
            .Value = 2
        },
        New TrackBarItem With {
            .Text = "Item3",
            .Value = 3
        },
        New TrackBarItem With {
            .Text = "Item4",
            .Value = 4
        }
    })
End Sub

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:

ASPxTrackBar can be oriented horizontally or vertically, dependent upon the ASPxTrackBar.Orientation property value.
ASPxTrackBar can be displayed in normal or reversed mode, controlled by the ASPxTrackBar.Direction property.
You can define how the scale labels should be highlighted using the ASPxTrackBar.ScaleLabelHighlightMode property.
The position of scale and value tooltip elements can be specified via the ASPxTrackBar.ScalePosition and ASPxTrackBar.ValueToolTipPosition properties respectively.

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.