RangeSelector

The RangeSelector is a widget that allows a user to select a range of values on a scale.

Included in: dx.viz.js, dx.viz-web.js, dx.all.js
Export: default
RangeSelector interactive configuration
Copy Code
Copy to Codepen
$("#rangeselector").dxRangeSelector({
});

                    

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

RangeSelector

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the RangeSelector widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function() {
    $("#rangeSelector").dxRangeSelector({
        scale: {
            startValue: new Date(2011, 0, 1),
            endValue: new Date(2011, 5, 1),
            tickInterval: { days: 7 }
        }
    });
});
<div id="rangeSelector"></div>
Angular
HTML
TypeScript
<dx-range-selector>
    <dxo-scale
        [startValue]="startDate"
        [endValue]="endDate">
        <dxo-tick-interval [days]="7"></dxo-tick-interval>
    </dxo-scale>
</dx-range-selector>
import { DxRangeSelectorModule } from 'devextreme-angular';
// ...
export class AppComponent {
    startDate = new Date(2011, 0, 1);
    endDate = new Date(2011, 5, 1);
}
@NgModule({
    imports: [
        // ...
        DxRangeSelectorModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-range-selector="{
        scale: {
            startValue: startDate,
            endValue: endDate,
            tickInterval: { days: 7 }
        }
    }"></div>
</div>
angular.module('DemoApp', ['dx'])
    .controller("DemoController", function ($scope) {
        $scope.startDate = new Date(2011, 0, 1);
        $scope.endDate = new Date(2011, 5, 1);
    });
Knockout
HTML
<div data-bind="dxRangeSelector: {
    scale: {
        startValue: new Date(2011, 0, 1),
        endValue: new Date(2011, 5, 1),
        tickInterval: { days: 7 }
    }
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().RangeSelector()
    .ID("rangeSelector")
    .Scale(scale => scale
        .StartValue(new DateTime(2011, 1, 1))
        .EndValue(new DateTime(2011, 6, 1))
        .TickInterval(ti => ti.Days(7))
    )
)
@(Html.DevExtreme().RangeSelector() _
    .ID("rangeSelector") _
    .Scale(Sub(scale)
        scale.StartValue(New DateTime(2011, 1, 1)) _
                .EndValue(New DateTime(2011, 6, 1)) _
                .TickInterval(Sub(ti) ti.Days(7))
    End Sub)
)

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

View Demo Watch Video

See Also

Configuration

An object that defines configuration options for the RangeSelector widget.

Show Example:
jQuery

This example shows how to display the RangeSelector 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 RangeSelector.

Events

This section describes events fired by this widget.

See Also