The DevExpress Blazor Range Selector allows you to visualize data on a linear scale. Users can change selection by dragging edge sliders or by moving the entire selected range.
The component ships with APIs designed to customize the following elements and presentation options:
- Major and minor scale ticks.
- Scale labels.
- Slider handles and markers.
- Background and shutter.
- Color palettes and individual element appearance.
The Range Selector can visualize data using multiple chart series types. To display a chart series, you must:
- Use the DxRangeSelector.Data property to bind the Range Selector to a data source.
- Declare a DxRangeSelectorChart object.
- Add an appropriate series object to chart markup and populate the chart with arguments and values.
In this demo, the Range Selector uses an area series. When you select a range on the scale, the component raises the DxRangeSelector.ValueChanged event and obtains values associated with the current selected range. These values define the axis visual range in a separate DxChart component.