diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts index 04bad33e0..bbae1d127 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts +++ b/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, diff --git a/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts b/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts index d96d94a02..e4b3dc0a1 100644 --- a/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts +++ b/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('.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'); diff --git a/packages/common/src/filters/sliderFilter.ts b/packages/common/src/filters/sliderFilter.ts index 327876c4e..2f5c75a54 100644 --- a/packages/common/src/filters/sliderFilter.ts +++ b/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): 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, sliderLeftVal: number, sliderRightVal: number): void { + protected sliderLeftOrRightChanged(e: DOMEvent, 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;