Range Changing

As its name assumes, the dxRangeSelector widget provides a capability to select a range of values on a scale. Once a range is selected, it can also be moved along the scale. This topic comprises information about performing selection and movement on a range in the dxRangeSelector widget.

Select a Range

In dxRangeSelector, you can select a range either manually or from code. There are two ways to select a range manually: by dragging sliders or by selecting an area on a scale using the mouse. The dxRangeSelector's behavior during manual range selection depends on the specified options of the behavior configuration object.

$(function () {
        behavior: {
            // The options specifying the dxRangeSelector's behavior go here

When you select a range using sliders, one slider can be dragged across another, swapping places with it. This capability is enabled by default. To disable it, set the allowSlidersSwap option to false.

There is one more option that specifies the dxRangeSelector's behavior when you select a range using sliders. When you release a slider, it either stays at the position where you released it or moves to the nearest scale tick. To specify how a slider should behave in this case, use the snapToTicks option.

In addition to sliders, you can select a range by using the mouse. To do this, press the left mouse button down at one end of a required range, drag it, and release it at the other end. To disable this capability, set the manualRangeSelectionEnabled option to false.
NOTE: The end of the range where you press the mouse button down should not belong to the area that was selected previously. Otherwise, this action will lead to the movement of the previously selected range along the scale.

To select a range from code, specify the required range using the startValue and endValue fields of the selectedRange configuration object.

Move a Range

You can move a selected range along the scale by clicking. The area where you click should be unselected. This capability is enabled by default. To disable it, set the behavior | moveSelectedRangeByClick option to false.

You can also move a selected range by dragging it. Click the selected area on the scale and drag it to the required position.

Handle the Range Changing Event

dxRangeSelector provides the capability to perform actions when a selected range is changed. Implement a callback function performing the required actions and assign it to the selectedRangeChanged option. When implementing this function, you can use the startValue and endValue fields of the object passed as a parameter or the this object.

The function assigned to the selectedRangeChanged option can be called either when moving a slider or after the movement has been completed. To specify when the selectedRangeChanged function should be called, use the behavior | callSelectedRangeChanged option.