React RangeSelector - Range Changing

This section describes how to select a range of values, move this range on a scale, and handle the range change event.

In RangeSelector, 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 RangeSelector's behavior during manual range selection depends on the specified properties of the behavior configuration object.

var rangeSelectorOptions = {
    behavior: {
        // The properties specifying the RangeSelector'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 property to false.

There is one more property that specifies RangeSelector 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 property.

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 property 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, use the value array.

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

RangeSelector 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 onValueChanged property. When implementing this function, you can access the previous and new ranges using the previousValue and value fields of the object passed as the parameter or the this object.

The function assigned to the onValueChanged property can be called either when moving a slider or after the movement has been completed. To specify when the onValueChanged function should be called, use the behavior.callValueChanged property.

Use Range Selection for Calculation Demo Use Range Selection for Filtering Demo