Date Slider
Last updated
Last updated
The Date Slider offers a dynamic and interactive way to filter data based on dates. Users can pick dates by sliding the bar, with customizable styling and behavior options.
Add a Date field to the Category Field in the visualizations pane.
Ensure the field is set to Date and not Date Hierarchy.
Once the field is set to Date, the visual automatically switches to the Date Slider mode.
Now drag the bubble to select a desired date range.
Click on the Calendar icon near Slider to choose date range from the Slider Calendar.
By default, the visual uses the date format from the Power BI data model, with the start and end dates also derived directly from the data model.
The Static Slider restricts date selection to values present in the data model. The minimum and maximum dates are automatically derived from the data model. As the slider is dragged, the positions of the start and end sliders adjust to reflect the selected date range, providing a precise filtering experience based on the existing dataset.
The Dynamic Slider enables users to select dates that may not exist in the data model. As the slider is dragged, the position of the bubble on the slider remains static, while the date value dynamically updates based on the movement. This allows for seamless exploration of custom date ranges beyond the data boundaries.
When the Before option is selected in the slider style, the slider is configured with a single drag handle. This allows users to select a specific point on the slider, representing a range that includes all dates or values before the selected point.
When the After option is selected in the slider style, the slider is configured with a single drag handle. This allows users to select a specific point on the slider, representing a range that includes all dates or values after the selected point.
In the Format Pane, under the Date Mode section, set the Selection Style to Slider.
This activates the slider options, including Slider Type.
Select the desired slider behavior from the dropdown menu, choosing from the options: Between No Scale, Between, After, and Before, as described in the slider type section above.
When enabled, displays a fixed label for the start and end dates, along with a calendar icon to select a range when between or between no scale is chosen. This option is available for all slider types. Enter the desired start and end range dates in the box, or alternatively, use the slider to adjust the start and end dates.
When enabled, the date selections within the slider are moved outside the slider for improved readability. This option is available across all slider types. Enabling this will automatically disable the Show Fixed Label option.
The Fixed Interval allows users to move the entire date range forward or backward while maintaining a fixed duration. This is useful for analyzing consecutive time periods, such as quarters, without manually adjusting the range.
Follow these steps to configure and use the Fixed Interval feature:
Add a Between Slider type in the visual.
Enable the Show Fixed Interval option under Format Pane -> Date Filter -> Slider section. This will display a configuration option in the UI to set the fixed gap.
In the visual, enable Fixed Interval and select the number of days to define the fixed range.
Use the slider to drag the date range forward or backward. The range duration (number of days) will remain fixed. But, the start and end dates will automatically adjust based on the fixed range.
Example: If a 120-day range is selected, dragging the slider forward moves the entire 90-day range ahead without altering its duration.
This option is available only in Between slider type.
When enabled, adds a scale to the slider based on the input data which helps users to drag the slider more precisely to select specific dates.
This option is available only in Between slider type.
Customize the appearance of the Date Slider using the following settings.
Axis Label Color: Customize the color of the scaling axis in the slider.
Slider Color: Customize the color of the selected slider range using the dropdown to access a color picker.
Slider Background Color: Set the color for the unselected slider range via the dropdown with a color picker option.
Font Color: Modify the font color of the displayed dates using a dropdown list with a color picker pop-up.
Background Color: Choose the background color for the slider display area using a color picker pop-up.
Drag Handle Color: Set the color of the slider’s drag handle for better visibility and styling.
Icon Color: Choose the icon color of the calendar using this option.
Font Style and Size: Choose the font size and use the Bold, Italics, or Underline options for additional emphasis.
