[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Collapse]Editors and Simple Controls
    Included Controls and Components
   [Expand]Common Editor Features and Concepts
   [Expand]Lookup Editors
    Popup Container Editor
   [Expand]Token Edit Control
   [Expand]Breadcrumb Edit Control
   [Collapse]Range Control
     Visual Elements
     Numeric Ranges
     Custom Range Control Client
   [Expand]Image Slider
    Camera Control
    Templated ListBox Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Range Control

The RangeControl provides a data range selection functionality. In its simplest form, the Range Control can be used to select numeric ranges:

At first glance, the Range Control might resemble a RangeTrackBarControl. However, its ability to select and visualize data ranges is much more flexible. Here is a list of supported features:

  • Multiple ways to select ranges;
  • Animated range selection;
  • Range zooming in and out.
  • Out-of-the-box support for numeric ranges;
  • Ability to implement a custom client that will render the Range Control's client area. Range selection and zooming are automatically supported for custom clients;
  • Horizontal and vertical orientations;
  • Touch screen support.

Expanded Range Control Client

Data for the Range Control is provided by a Range Control Client, which must be associated with the Range Control by using the RangeControl.Client property. The client also visualizes data in the Range Control's viewport in a specific manner. Embedded into the Range Control, the client automatically gains support for range selection and zooming.

The following Range Control Clients are available out of the box.

To embed a NumericRangeControlClient, NumericChartRangeControlClient, DateTimeRangeControlClient, DateTimeChartRangeControlClient, or TimeSpanChartRangeControlClient into the Range Control at design time, use the Range Control's smart tag.

When required, you can implement your own Range Control Client that will display data in a custom manner within the Range Control. See the Custom Range Control Client topic to learn more.

Expanded Range Selection

A user can select ranges within the Range Control in a number of ways:

Touch screens are also supported by the Range Control. So you can select ranges using your fingers as well.

Expanded Range Zooming

An end-user can zoom in and out of visible ranges in the Range Control via the Zoom&Scroll Bar.

Two Zoom Grips help an end-user to resize the visible range and as such, change the zoom factor. After zooming, the Viewport Scroll Thumb marks the bounds of the visible range within the total range. As the element's name suggests, dragging the Viewport Scroll Thumb shifts the visible range.

Expanded Range Control's Settings

The display of data within the Range Control's viewport is performed by the Range Control Client, not the Range Control itself. Once a Client is added to the Range Control, its customization settings affecting the display of data are exposed via the RangeControl.ClientOptions property.

When using the NumericRangeControlClient, you can customize the total range's bounds via the NumericRangeControlClient.Minimum and NumericRangeControlClient.Maximum properties. You can also customize the minimum increment for range selection via the NumericRangeControlClient.RulerDelta property. All these settings are exposed via the RangeControl.ClientOptions property.

The Range Control also provides settings that help you get the control's current state.

Is this topic helpful?​​​​​​​