RangeSelector

A widget that allows end users to select a range of values on a scale.

Included in: dx.chartjs.js, dx.all.js

This widget represents a scale (numeric or date-time) and two sliders. Select the required range by moving the sliders.

RangeSelector

The dxRangeSelector widget, like any other DevExtreme data visualization widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxRangeSelector widget within the "rangeSelectorContainer" container using the jQuery approach.

<script>
  $(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
      //Options of the configuration object are specified here
    });
  });
</script>

To configure the dxRangeSelector widget, pass a configuration object as the constructor's parameter. The properties of this object represent the widget's configuration options. To specify the options, set the properties of the configuration object to the required values. Refer to the Configuration section to find the options that are required to configure your dxRangeSelector widget.

A chart can be displayed in the background of the dxRangeSelector widget. This allows end users to select the required range in a chart series. You can also integrate the dxRangeSelector widget with a stand-alone dxChart widget to emulate chart zooming and scrolling.

Start Tutorial View Demo Watch Video

See Also

To learn the widget's concepts and overview features, refer to the Range Selector section within the Data Visualization Guides.

Configuration

An object that defines configuration options for the dxRangeSelector widget.

Show Example:
jQuery

This example shows how to display the dxRangeSelector widget. The only option which is specifically set is the dataSource. The other option - the dataSourceField - thought required, does not have to be specified because it is set to 'arg' (a required data source field) by default.


                                    

                                    

Methods

This section describes the methods that can be used in code to manipulate objects related to the dxRangeSelector.

Events

This section describes events fired by the widget.