fix(filters): Slider Filter left value should never be above left val…

…ue (#1590)

- goes with previous commit, right OR left value should never be above right OR left value a Slider Range filter

examples/vite-demo-vanilla-bundle/src/examples/example14.ts

@@ -23,6 +23,7 @@ import {
 } from '@slickgrid-universal/common';
 import { BindingEventService } from '@slickgrid-universal/binding';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
 import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import countriesJson from './data/countries.json?raw';
@@ -227,6 +228,7 @@ export default class Example14 {
         id: 'percentComplete', name: '% Complete', field: 'percentComplete', minWidth: 150,
         type: FieldType.number,
         sortable: true, filterable: true, columnGroup: 'Analysis',
+        customTooltip: { position: 'center' },
         filter: {
           model: Filters.sliderRange,
           operator: '>=',
@@ -482,7 +484,7 @@ export default class Example14 {
       excelExportOptions: {
         exportWithFormatter: false
       },
-      externalResources: [new ExcelExportService()],
+      externalResources: [new SlickCustomTooltip(), new ExcelExportService()],
       enableFiltering: true,
       enableRowSelection: true,
       enableCheckboxSelector: true,

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

@@ -149,7 +149,7 @@ describe('SliderRangeFilter', () => {
     expect(rowMouseEnterSpy).toHaveBeenCalledWith({ column: mockColumn, grid: gridStub }, expect.anything());
   });
 
-  it('should not have min value above max value', () => {
+  it('should not have min value above max value when sliding right', () => {
     const rowMouseEnterSpy = jest.spyOn(gridStub.onHeaderRowMouseEnter, 'notify');
 
     filter.init(filterArguments);
@@ -167,6 +167,24 @@ describe('SliderRangeFilter', () => {
     expect(rowMouseEnterSpy).toHaveBeenCalledWith({ column: mockColumn, grid: gridStub }, expect.anything());
   });
 
+  it('should not have max value above min value when sliding left', () => {
+    const rowMouseEnterSpy = jest.spyOn(gridStub.onHeaderRowMouseEnter, 'notify');
+
+    filter.init(filterArguments);
+    filter.setValues([32, 25]);
+    const filterElms = divContainer.querySelectorAll<HTMLInputElement>('.search-filter.slider-container.filter-duration input');
+    filterElms[1].dispatchEvent(new CustomEvent('input'));
+
+    const filterLowestElm = divContainer.querySelector('.lowest-range-duration') as HTMLInputElement;
+    const filterHighestElm = divContainer.querySelector('.highest-range-duration') as HTMLInputElement;
+
+    expect(filterElms[0].value).toBe('32');
+    expect(filterElms[1].value).toBe('32');
+    expect(filterLowestElm.textContent).toBe('32');
+    expect(filterHighestElm.textContent).toBe('32');
+    expect(rowMouseEnterSpy).toHaveBeenCalledWith({ column: mockColumn, grid: gridStub }, expect.anything());
+  });
+
   it('should call "setValues" and expect that value to be in the callback when triggered', () => {
     const callbackSpy = jest.spyOn(filterArguments, 'callback');
 

packages/common/src/filters/sliderFilter.ts

@@ -475,7 +475,7 @@ export class SliderFilter implements Filter {
       }
     }
 
-    this.sliderLeftOrRightChanged(e, sliderLeftVal, sliderRightVal);
+    this.sliderLeftOrRightChanged(e, 'left', sliderLeftVal, sliderRightVal);
   }
 
   protected slideRightInputChanged(e: DOMEvent<HTMLInputElement>): void {
@@ -486,19 +486,25 @@ export class SliderFilter implements Filter {
       this._sliderRightInputElm.value = String(sliderLeftVal + ((this.filterOptions as SliderRangeOption)?.stopGapBetweenSliderHandles ?? GAP_BETWEEN_SLIDER_HANDLES));
     }
 
-    this.sliderLeftOrRightChanged(e, sliderLeftVal, sliderRightVal);
+    this.sliderLeftOrRightChanged(e, 'right', sliderLeftVal, sliderRightVal);
   }
 
-  protected sliderLeftOrRightChanged(e: DOMEvent<HTMLInputElement>, sliderLeftVal: number, sliderRightVal: number): void {
+  protected sliderLeftOrRightChanged(e: DOMEvent<HTMLInputElement>, side: 'left' | 'right', sliderLeftVal: number, sliderRightVal: number): void {
     let triggerEvent = true;
     this.updateTrackFilledColorWhenEnabled();
     this.changeBothSliderFocuses(true);
     this._sliderRangeContainElm.title = this.sliderType === 'double' ? `${sliderLeftVal} - ${sliderRightVal}` : `${sliderRightVal}`;
 
-    // min value should never be above max value, override the min value with max when then happens
-    if (this._sliderLeftInputElm && sliderLeftVal > sliderRightVal) {
-      this._sliderLeftInputElm.value = `${sliderRightVal}`;
-      triggerEvent = false;
+    //  left or right value should never be above each others
+    // override the min value with max when then happens (or the inverse)
+    if (this.sliderType === 'double' && this._sliderLeftInputElm && this._sliderRightInputElm) {
+      if (side === 'left' && sliderLeftVal > sliderRightVal) {
+        this._sliderLeftInputElm.value = `${sliderRightVal}`;
+        triggerEvent = false;
+      } else if (side === 'right' && sliderLeftVal > sliderRightVal) {
+        this._sliderRightInputElm.value = `${sliderLeftVal}`;
+        triggerEvent = false;
+      }
     }
 
     const hideSliderNumbers = (this.filterOptions as SliderOption)?.hideSliderNumber ?? (this.filterOptions as SliderRangeOption)?.hideSliderNumbers;