Skip to main content

Numeric Ranges

  • 3 minutes to read

The Range Control’s data visualization specifics are covered in the Range Control topic. The current document shows how to set up a Range Control to display numeric ranges and allow end-users to select them.

The Range Control provides a drawing surface where a Range Control Client visualizes its data. To add support for numeric (integer, float, double or decimal) ranges, you need to assign a NumericRangeControlClient object to the RangeControl.Client property.

Design-Time Example

  1. Drop a RangeControl control from the Toolbox onto the form.

    RangeControl-Tut-NumRange-Step1-DropRangeControl

    No Range Control Client is added to the Range Control at the moment. A message is displayed across the control prompting you to add a Client.

  2. Right click the Range Control and select Add Numeric Client.

    RangeControl-Tut-NumRange-Step2-AddNumericClientMenu

    This adds a NumericRangeControlClient to the form and assigns it to the RangeControl.Client property.

  3. Once the Numeric Range Control Client is added, the Range Control displays a ruler, tickmark lines and selection thumbs.

    RangeControl-Tut-NumRange-Step3-NumRangeControlClientAdded

    You can now run the application and see the Range Control in action.

  4. After adding a NumericRangeControlClient, its settings become accessible via the RangeControl.ClientOptions property. You can use this property to customize the available options.

    RangeControl-Tut-NumRange-Step4-NumRangeControlClientOptions

    A numeric range is limited by its NumericRangeControlClient.Minimum and NumericRangeControlClient.Maximum values. The NumericRangeControlClient.RulerDelta property specifies the minimum distance between tickmarks and also defines the minimum step for range selection.

  5. By default, the NumericRangeControlClient.Minimum, NumericRangeControlClient.Maximum and NumericRangeControlClient.RulerDelta property values are of the integer type. To display a range of the double, decimal or float type, you need to set these properties to the required double, decimal or float values.

    Here is how you can set the Maximum property to the double 10.5 value. Focus the Maximum member in the Properties window and click the ellipsis button.

    RangeControl-Tut-NumRange-Step5-MaximumProp-ClickEllipsisButton

    In the Object Editor window, set Type to Numeric(Double) and Value to 10.5.

    RangeControl-Tut-NumRange-Step5.2-MaximumProp-SetTo10.5

    The result of setting the Maximum, Minimum and RulerDelta properties to the double values 10.5, 5.5 and 0.5 respectively is shown below.

    RangeControl-Tut-NumRange-Step5.3-DoubleValues

The currently selected range can be obtained via the RangeControl.SelectedRange property. You can also use this property to change the selected range from code.

Runtime Example

The following code shows how to set up a NumericRangeControlClient to select a range of the double type between 5.5 and 10.5, with the minimum step set to 0.5.

using DevExpress.XtraEditors;

// Set up Numeric Range Control Client.
NumericRangeControlClient numClient = new NumericRangeControlClient();
numClient.Maximum = 10.5D;
numClient.Minimum = 5.5D;
numClient.RulerDelta = 0.5D;
// Assign Client to Range Control.
rangeControl1.Client = numClient;
// Modify selected range from code.
rangeControl1.SelectedRange.Maximum = 7;
rangeControl1.SelectedRange.Minimum = 6;

The result is displayed below.

RangeControl-Tut-NumRange-RuntimeSample