fix(common): Slider Range should update both number addons (#803)

* fix(common): Slider Range should update both number addons
- new Slider code refactoring did not update slider input addon numbers on both side (left/right)

* styling: fix more styling issues related to Slider

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

@@ -188,6 +188,7 @@ export class Example12 {
           model: Editors.slider,
           massUpdate: true, minValue: 0, maxValue: 100,
         },
+        customTooltip: { position: 'center' }
       },
       // {
       //   id: 'percentComplete2', name: '% Complete', field: 'analysis.percentComplete', minWidth: 100,

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

@@ -204,7 +204,7 @@ export class Example34 {
       const now = new Date();
       now.setHours(9, 30, 0);
       const currency = (Math.floor(Math.random() * 10)) % 2 ? 'CAD' : 'USD';
-      const company = faker.company.companyName();
+      const company = faker.company.name();
 
       datasetTmp[i] = {
         id: i,

packages/common/src/editors/__tests__/sliderEditor.spec.ts

@@ -223,14 +223,14 @@ describe('SliderEditor', () => {
       editor.loadValue(mockItemData);
       editor.setValue(17);
 
-      const editorElm = divContainer.querySelector('.slider-container.slider-editor') as HTMLDivElement;
+      const inputElm = divContainer.querySelector('.slider-editor-input.editor-price') as HTMLDivElement;
       const editorNumberElm = divContainer.querySelector('.input-group-text') as HTMLInputElement;
       const mockEvent = new CustomEvent('change');
-      Object.defineProperty(mockEvent, 'target', { writable: true, configurable: true, value: { value: '13' } });
-      editorElm.dispatchEvent(mockEvent);
+      Object.defineProperty(mockEvent, 'target', { writable: true, configurable: true, value: { value: '17' } });
+      inputElm.dispatchEvent(mockEvent);
 
       expect(editor.isValueChanged()).toBe(true);
-      expect(editorNumberElm.textContent).toBe('13');
+      expect(editorNumberElm.textContent).toBe('17');
       expect(cellMouseEnterSpy).toHaveBeenCalledWith({ grid: gridStub }, expect.anything());
     });
 
@@ -489,7 +489,7 @@ describe('SliderEditor', () => {
       const editorElm = divContainer.querySelector('.slider-editor input.editor-price') as HTMLInputElement;
       editorElm.dispatchEvent(new Event('change'));
 
-      expect(editor.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(editor.sliderOptions?.sliderTrackBackground).toBe('linear-gradient(to right, #eee 0%, var(--slick-slider-filter-thumb-color, #86bff8) 0%, var(--slick-slider-filter-thumb-color, #86bff8) 45%, #eee 45%)');
     });
 
     it('should click on the slider track and expect handle to move to the new position', () => {

packages/common/src/editors/sliderEditor.ts

@@ -107,7 +107,6 @@ export class SliderEditor implements Editor {
 
       // create HTML string template
       this._editorElm = this.buildDomElement();
-      this._inputElm = this._editorElm.querySelector('input') as HTMLInputElement;
 
       if (!compositeEditorOptions) {
         this.focus();
@@ -116,11 +115,11 @@ export class SliderEditor implements Editor {
       // watch on change event
       this._cellContainerElm.appendChild(this._editorElm);
       this._bindEventService.bind(this._sliderTrackElm, ['click', 'mouseup'], this.sliderTrackClicked.bind(this) as EventListener);
-      this._bindEventService.bind(this._editorElm, ['change', 'mouseup', 'touchend'], this.handleChangeEvent.bind(this) as EventListener);
+      this._bindEventService.bind(this._inputElm, ['change', 'mouseup', 'touchend'], this.handleChangeEvent.bind(this) as EventListener);
 
       // if user chose to display the slider number on the right side, then update it every time it changes
       // we need to use both "input" and "change" event to be all cross-browser
-      this._bindEventService.bind(this._editorElm, ['input', 'change'], this.handleChangeSliderNumber.bind(this));
+      this._bindEventService.bind(this._inputElm, ['input', 'change'], this.handleChangeSliderNumber.bind(this));
     }
   }
 
@@ -252,9 +251,11 @@ export class SliderEditor implements Editor {
    */
   reset(value?: number | string, triggerCompositeEventWhenExist = true, clearByDisableCommand = false) {
     const inputValue = value ?? this._originalValue ?? 0;
-    if (this._editorElm) {
-      this._editorElm.querySelector<HTMLInputElement>('input')!.value = `${inputValue}`;
-      this._editorElm.querySelector<HTMLInputElement>('div.input-group-addon.input-group-append')!.textContent = `${inputValue}`;
+    if (this._inputElm) {
+      this._inputElm.value = `${inputValue}`;
+    }
+    if (this._sliderNumberElm) {
+      this._sliderNumberElm.textContent = `${inputValue}`;
     }
     this._isValueTouched = false;
 
@@ -322,7 +323,7 @@ export class SliderEditor implements Editor {
     this._defaultValue = +defaultValue;
 
     this._sliderTrackElm = createDomElement('div', { className: 'slider-track' });
-    const inputElm = createDomElement('input', {
+    this._inputElm = createDomElement('input', {
       type: 'range', title,
       defaultValue: `${defaultValue}`, value: `${defaultValue}`, min: `${minValue}`, max: `${maxValue}`,
       step: `${this.columnEditor?.valueStep ?? Constants.SLIDER_DEFAULT_STEP}`,
@@ -333,7 +334,7 @@ export class SliderEditor implements Editor {
     const divContainerElm = createDomElement('div', { className: 'slider-container slider-editor' });
     const sliderInputContainerElm = createDomElement('div', { className: 'slider-input-container slider-editor' });
     sliderInputContainerElm.appendChild(this._sliderTrackElm);
-    sliderInputContainerElm.appendChild(inputElm);
+    sliderInputContainerElm.appendChild(this._inputElm);
     divContainerElm.appendChild(sliderInputContainerElm);
 
     if (!getEditorOptionByName<SliderOption, 'hideSliderNumber'>(this.columnEditor, 'hideSliderNumber')) {