Range Changing

As its name assumes, the RangeSelector 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 RangeSelector widget.

Select a Range

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 options of the behavior configuration object.

JavaScript
var rangeSelectorOptions = {
    behavior: {
        // The options 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 option to false.

There is one more option 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 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, use the value array.

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

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

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