Date Range Slider – QBeeQ

The Date Range Slider plugin enhances your dashboards with a clean, interactive date selection experience—embedded directly into the canvas. Designed with flexibility and aesthetic control in mind, it allows users to select and apply custom date ranges without relying on side panels or detached filters.

Installation and configuration

The Date Range Slider is a BloX widget, not a traditional plugin.

Operating system and version support:

Linux - Latest

Windows - Latest

⚠️

The Date Range Slider requires the use of Sisense BloX. Users should have a basic understanding of JSON and basic HTML and CSS knowledge.

Creating a new Date Range Slider

⚠️

Customizing the Date Range Slider requires the use of Sisense BloX. Users should have a basic understanding of JSON and basic HTML and CSS knowledge.

To create a new Date Range Slider, select BloX from the widget dropdown list:

Add at least one date column in the Data Panel

Copy the JSON into the BloX Editor

Create a custom action and action snippet

Customize slider via code

Add a widget-level script

Copy the JSON into the BloX Editor

Copy and paste the provided JSON into the BloX Editor in the Editor tab.

ℹ️

The code can be found in File Management > Plugins > QBeeQDateRangeSlider > blox_json.json

Replace the value in A in items='{sliderData:A}’ with the name of the date dimension you added in the items data panel.

Create a custom action and action snippet

Switch to the Actions tab in the BloX Editor

Click the three-dot menu and click Create Action

Name your action ApplyFilter

Copy and paste the JavaScript code into the editor

ℹ️

The code can be found in File Management > Plugins > QBeeQDateRangeSlider > customAction.js

Click Create

Customize slider via code

Because the Date Range Slider is built using BloX, users have the ability to customize and style it using simple HTML and CSS. Switch to the Configurations tab in the BloX Editor, and tailor as needed for your use case.

Add a widget-level script

Include the following widget-level script, which will ensure the selected values are retained.

ℹ️

The code can be found in File Management > Plugins > QBeeQDateRangeSlider > widget_script.txt

Using the Date Range Slider

Once set up on the dashboard, the Slider will appear on the dashboard.

Users can interact with the slider to set a start and end date. Clicking the Apply Filter button will trigger the ApplyFilter action, updating the dashboard with the selected range.