Description
- adding date slider range filter on Summary Block (Events)
- view demo – password: abc
- buy me a coffee

#1. Install Code
#1.1. Hover on top right of section where you use Summary Block Event > Click EDIT SECTION

at Design > Anchor Link > enter word: summary-date-filter

#1.2. Hover on Page where you use Summary Block Event > Click Gear icon

Click Advanced > Paste this code
- If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1
<!-- 06.26c11v1 Summary Block Date Range Filter -->
<script>
window.SummaryDateFilterConfig = {
filterBarSelector: 'section[id*="summary-date-filter"]',
label: 'Filter by Date',
fontSize: '13px',
marginBottom: '24px',
sliderMinWidth: '200px',
trackColor: '#9a5151',
activeTrackColor: '#000',
handleColor: '#9a5151',
labelColor: '#9a5151',
};
</script>
<script src="https://code.beaverhero.com/summaryblock/0626c11v1summaryblockdatefilter.js"></script>

#2. Customize
#2.1. To change text “Filter by Date”, change Line 05
label: 'Filter by Date',
#2.2. To change size of text “Filter by Date” & Date range text, change Line 06
fontSize: '13px',
#2.3. To change style of Slider, change Line 08 to Line 12
sliderMinWidth: '200px', trackColor: '#9a5151', activeTrackColor: '#000', handleColor: '#9a5151', labelColor: '#9a5151',
#3. Other
#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Block under Summary Block

Choose Markdown
![]()
Add this code into Markdown
<script>
window.SummaryDateFilterConfig = {
filterBarSelector: 'section[id*="summary-date-filter"]',
label: 'Filter by Date',
fontSize: '13px',
marginBottom: '24px',
sliderMinWidth: '200px',
trackColor: '#9a5151',
activeTrackColor: '#000',
handleColor: '#9a5151',
labelColor: '#9a5151',
};
</script>
<script src="https://code.beaverhero.com/summaryblock/0626c11v1summaryblockdatefilter.js"></script>
