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 of manual range selection: dragging sliders and 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.

JavaScript
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        behavior: {
            // The options specifying the dxRangeSelector's behavior go here
        }
    });
});

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

There is one more option that specifies dxRangeSelector behavior when you select a range using sliders. When you let a slider off, it either stays at the place 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 the mouse. To do this, press the left mouse button down at one end of a required range and release it at another. To disable this capability, set the manualRangeSelectionEnabled option to false.
NOTE: The end of the range where you press the mouse button down should belong to the area that was previously unselected. Otherwise, the described actions 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 a click. The area where you click should be unselected. By default, this capability is enabled. To disable it, set the behavior | moveSelectedRangeByClick option to false.

Moreover, you can move a selected range by dragging it. Click the selected area on the scale and drag it to the required place.

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 onSelectedRangeChanged option. When implementing this function, you can use the startValue and endValue fields of the object passed as the parameter or the this object.

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

View Demo