Intro

The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.

Range selector with column chart

Usage

Use the range selector if:

• You have a large dataset and want to focus on a certain range of data points.
• The dataset is combined with a chart above (preferable).
• You intend to use the same chart visualization in the control and above it.
• You are using a column chart or line chart.

Do not use the range selector if:

• It is for decoration only.
• You have a small dataset.
• You intend to use different chart visualizations in the control and above it.
• You want to use the range selector instead of a chart.
• You are using chart types other than a column chart or line chart.

Responsiveness

Behavior and Interaction

Changing Values

The user can change the range in two ways:

• By using drag and drop to adjust the grips.
• By clicking the bar outside the selected range. The corresponding grip then moves to the new position.

Moving the Entire Range

Users can move the entire selected range by dragging it. When you hover over the selected range, the cursor changes to indicate that the range can be dragged.

Positioning and Overlapping

The grips of the range selector cannot be positioned on the same value. The grips cannot overlap.

Properties

• You can use the vizType property to choose the type of chart that will be displayed in the range selector. The supported charts are column chart and line chart.
• You can use the width and height properties to set the size of the range selector. On a mobile device, the range selector has a maximum height of 7.5 rem.
• You can use the valueAxisVisible property to show or hide the value axis.
• You can use showStartEndLabel to set a start and end label for the range selector.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.