The range selector control provides an intuitive interface for selecting a smaller range from a larger collection. It is commonly used in financial dashboards to filter a date range for which the data needs to be visualized.
The major and minor scales display the range with different intervals and are placed at the top and bottom of the range selector. A required date-time component can be configured to be shown in major and minor scales.
Add any view as the content of the range selector to provide a glimpse of the bound data and provide a detailed view of the selected range in a separate view.
Bind the selected data from the range selector to other data visualization controls to visualize the filtered data.
The range selector provides three ways to select a range:
All the elements of the range selector are highly customizable.
The size, color, font family, font attribute, and alignment of the minor and major labels are customizable.
The entire appearance of the left and right thumbs can be customized.
The color, stroke width, dash array, and visibility of the major and minor gridlines are customizable.
Tooltips display the start and end values of the selected range to make choosing the required range easier for users.
Deferred scrolling allows you to defer the selected range to be updated until the user stops dragging the thumbs. This provides a smooth scrolling experience.
All static text within the range selector can be localized to any desired language.