How to add a Custom Horizon Filter with Range Slider in Bold BI

This article will guide you through the process of implementing a custom horizon filter with a range slider in Bold BI. This filter can be used in multiple dashboards and can be resized according to your requirements.

Steps to Add Custom Widget and Configure Horizon Filter

1. Download the RangeSlider Custom Widget

2. Navigate to the settings page and select the widgets tab. Click the “Add New Widget” button to browse the downloaded custom widget (*.bicw) file and add it.
   

   
   
   Now you can find the added widget in the Custom widgets section as like the below image.
   
   

3. Drag and drop the custom widget: In the Designer page, drag and drop the combine widget. Then, drag and drop the built-in Date picker widget to the center of the combine widget and bind data. Change the DatePicker type to “Range” in the properties panel and create the needed relative dates as per your requirement.
   

   

4. Configure the Datepicker control: Unselect the “Act As Master Widget” property and enable the “Ignore Filter Actions” for the Datepicker control.
   

   

5. Add the RangeSlider custom widget: Drag and drop the RangeSlider custom widget into the combine widget and cover the combine widget container. Bind the same date column that you have bound to the Datepicker to the Range Slider custom widget.
   

   

6. Configure the Range Slider Custom widget: Enable the “Act As Master Widget” property and enable the “Ignore Filter Actions” for the Range Slider Custom widget.
   

   

7. Preview and apply filter: Now you can preview and apply the filter through the Range Slider custom widget.
   

   

Additional References:

• Bold BI
• Custom Widgets in Bold BI