feat(filters): add Slider filter track filled track color (#795)

examples/webpack-demo-vanilla-bundle/src/examples/example02.scss

@@ -3,3 +3,7 @@ $control-height: 2.4em;
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
 @import 'bulma/bulma';
 
+:root {
+  // You can change the slider track filled color via the option "sliderTrackFilledColor" or the CSS variable "--slick-slider-filter-filled-track-color"
+  --slick-slider-filter-filled-track-color: #9ac49c;
+}

examples/webpack-demo-vanilla-bundle/src/examples/example02.ts

@@ -80,7 +80,7 @@ export class Example2 {
         filter: {
           model: Filters.slider,
           operator: '>=',
-          filterOptions: { hideSliderNumber: true, enableSliderTrackColoring: true, sliderTrackFilledColor: '#9ac49c' } as SliderOption
+          filterOptions: { hideSliderNumber: true, enableSliderTrackColoring: true } as SliderOption
         },
         sortable: true,
         type: FieldType.number,

packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts

@@ -285,7 +285,7 @@ describe('CompoundSliderFilter', () => {
     const filterElms = divContainer.querySelectorAll<HTMLInputElement>('.search-filter.slider-container.filter-duration input');
     filterElms[0].dispatchEvent(new Event('change'));
 
-    expect(filter.sliderOptions?.sliderTrackBackground).toBe('linear-gradient(to right, #eee 0%, var(--slick-slider-filter-thumb-color, #86bff8) 0%, var(--slick-slider-filter-thumb-color, #86bff8) 80%, #eee 80%)');
+    expect(filter.sliderOptions?.sliderTrackBackground).toBe('linear-gradient(to right, #eee 0%, #86bff8 0%, #86bff8 80%, #eee 80%)');
   });
 
   it('should click on the slider track and expect handle to move to the new position', () => {

packages/common/src/filters/__tests__/singleSliderFilter.spec.ts

@@ -229,7 +229,7 @@ describe('SingleSliderFilter', () => {
     const filterElms = divContainer.querySelectorAll<HTMLInputElement>('.search-filter.slider-container.filter-duration input');
     filterElms[0].dispatchEvent(new Event('change'));
 
-    expect(filter.sliderOptions?.sliderTrackBackground).toBe('linear-gradient(to right, #eee 0%, var(--slick-slider-filter-thumb-color, #86bff8) 0%, var(--slick-slider-filter-thumb-color, #86bff8) 80%, #eee 80%)');
+    expect(filter.sliderOptions?.sliderTrackBackground).toBe('linear-gradient(to right, #eee 0%, #86bff8 0%, #86bff8 80%, #eee 80%)');
   });
 
   it('should click on the slider track and expect handle to move to the new position', () => {

packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts

@@ -312,8 +312,8 @@ describe('SliderRangeFilter', () => {
     filterElms[0].dispatchEvent(new CustomEvent('change'));
     const sliderTrackElm = divContainer.querySelector('.slider-track') as HTMLDivElement;
 
-    // expect(sliderTrackElm.style.background).toBe('linear-gradient(to right, #eee 2%, var(--slick-slider-filter-thumb-color, #86bff8) 2%, var(--slick-slider-filter-thumb-color, #86bff8) 80%, #eee 80%)');
-    expect(filter.sliderOptions?.sliderTrackBackground).toBe('linear-gradient(to right, #eee 2%, var(--slick-slider-filter-thumb-color, #86bff8) 2%, var(--slick-slider-filter-thumb-color, #86bff8) 80%, #eee 80%)');
+    // expect(sliderTrackElm.style.background).toBe('linear-gradient(to right, #eee 2%, #86bff8 2%, #86bff8 80%, #eee 80%)');
+    expect(filter.sliderOptions?.sliderTrackBackground).toBe('linear-gradient(to right, #eee 2%, #86bff8 2%, #86bff8 80%, #eee 80%)');
   });
 
   it('should click on the slider track and expect left handle to move to the new position when calculated percent is below 50%', () => {

packages/common/src/filters/sliderFilter.ts

@@ -23,6 +23,7 @@ import { mapOperatorToShorthandDesignation } from '../services/utilities';
 import { buildSelectOperator, compoundOperatorNumeric } from './filterUtilities';
 
 declare const Slick: SlickNamespace;
+const DEFAULT_SLIDER_TRACK_FILLED_COLOR = '#86bff8';
 const GAP_BETWEEN_SLIDER_HANDLES = 0;
 const Z_INDEX_MIN_GAP = 20; // gap in Px before we change z-index so that lowest/highest handle doesn't block each other
 
@@ -46,6 +47,7 @@ export class SliderFilter implements Filter {
   protected _sliderTrackElm!: HTMLDivElement;
   protected _sliderLeftElm?: HTMLInputElement;
   protected _sliderRightElm?: HTMLInputElement;
+  protected _sliderTrackFilledColor = DEFAULT_SLIDER_TRACK_FILLED_COLOR;
   sliderType: SliderType = 'double';
   grid!: SlickGrid;
   searchTerms: SearchTerm[] = [];
@@ -118,6 +120,9 @@ export class SliderFilter implements Filter {
     this.searchTerms = args?.searchTerms ?? [];
     this._argFilterContainerElm = args.filterContainerElm;
 
+    // get slider track filled color from CSS variable when exist
+    this._sliderTrackFilledColor = window.getComputedStyle(document.documentElement).getPropertyValue('--slick-slider-filter-filled-track-color') || DEFAULT_SLIDER_TRACK_FILLED_COLOR;
+
     // step 1, create the DOM Element of the filter & initialize it if searchTerm is filled
     this._filterElm = this.createDomFilterElement(this.searchTerms);
   }
@@ -527,7 +532,7 @@ export class SliderFilter implements Filter {
       const percent2 = ((+this._sliderRightElm.value - +this._sliderRightElm.min) / (this.sliderOptions?.maxValue ?? 0 - +this._sliderRightElm.min)) * 100;
       const bg = 'linear-gradient(to right, %b %p1, %c %p1, %c %p2, %b %p2)'
         .replace(/%b/g, '#eee')
-        .replace(/%c/g, (this.getFilterOptionByName('sliderTrackFilledColor') ?? 'var(--slick-slider-filter-thumb-color, #86bff8)') as string)
+        .replace(/%c/g, this.getFilterOptionByName('sliderTrackFilledColor') || this._sliderTrackFilledColor || DEFAULT_SLIDER_TRACK_FILLED_COLOR)
         .replace(/%p1/g, `${percent1}%`)
         .replace(/%p2/g, `${percent2}%`);
 

packages/common/src/interfaces/sliderOption.interface.ts

@@ -1,5 +1,8 @@
 export interface SliderOption {
-  /** Defaults to false, do we want to show slider track coloring? */
+  /**
+   * Defaults to false, do we want to show slider track coloring?
+   * You can change the slider track filled color via the option "sliderTrackFilledColor" or the CSS variable "--slick-slider-filter-filled-track-color"
+   */
   enableSliderTrackColoring?: boolean;
 
   /** Defaults to true, hide the slider number shown on the right side */