diff --git a/.editorconfig b/.editorconfig
index 218eee3d3..b55e99456 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -6,7 +6,7 @@ charset = utf-8
 end_of_line = lf
 indent_style = space
 indent_size = 4
-insert_final_newline = true
+insert_final_newline = false
 trim_trailing_whitespace = true
 
 [*]
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 162bb5085..11bc488ae 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-  <a class="navbar-brand" href="https://github.com/ghiscoding/Angular-Slickgrid">
+  <a class="navbar-brand ms-2" href="https://github.com/ghiscoding/Angular-Slickgrid">
     <i class="fa fa-github"></i>
     <span>{{title}}</span>
   </a>
diff --git a/src/app/modules/angular-slickgrid/editors/__tests__/sliderEditor.spec.ts b/src/app/modules/angular-slickgrid/editors/__tests__/sliderEditor.spec.ts
index 762c71091..cfbaf6bbe 100644
--- a/src/app/modules/angular-slickgrid/editors/__tests__/sliderEditor.spec.ts
+++ b/src/app/modules/angular-slickgrid/editors/__tests__/sliderEditor.spec.ts
@@ -1,6 +1,6 @@
 import { Editors } from '../index';
 import { SliderEditor } from '../sliderEditor';
-import { AutocompleteOption, Column, EditorArgs, EditorArguments, GridOption, KeyCode } from '../../models';
+import { AutocompleteOption, Column, ColumnEditor, EditorArgs, EditorArguments, GridOption, KeyCode } from '../../models';
 
 const KEY_CHAR_0 = 48;
 const containerId = 'demo-container';
@@ -47,7 +47,7 @@ describe('SliderEditor', () => {
       grid: gridStub,
       column: mockColumn,
       item: mockItemData,
-      event: null,
+      event: null as any,
       cancelChanges: jest.fn(),
       commitChanges: jest.fn(),
       container: divContainer,
@@ -61,7 +61,7 @@ describe('SliderEditor', () => {
   describe('with invalid Editor instance', () => {
     it('should throw an error when trying to call init without any arguments', (done) => {
       try {
-        editor = new SliderEditor(null);
+        editor = new SliderEditor(null as any);
       } catch (e) {
         expect(e.toString()).toContain(`[Angular-SlickGrid] Something is wrong with this grid, an Editor must always have valid arguments.`);
         done();
@@ -90,10 +90,10 @@ describe('SliderEditor', () => {
 
     it('should have a title (tooltip) when defined in its column definition', () => {
       const testValue = 'test title';
-      mockColumn.internalColumnEditor.title = testValue;
+      mockColumn.internalColumnEditor!.title = testValue;
 
       editor = new SliderEditor(editorArguments);
-      const editorElm = divContainer.querySelector<HTMLInputElement>('.slider-editor input.editor-price');
+      const editorElm = divContainer.querySelector('.slider-editor input.editor-price') as HTMLInputElement;
 
       expect(editorElm.title).toBe(testValue);
     });
@@ -109,13 +109,13 @@ describe('SliderEditor', () => {
     });
 
     it('should create the input editor with defined value and a different step size when "valueStep" is provided', () => {
-      mockColumn.internalColumnEditor.valueStep = 5;
+      mockColumn.internalColumnEditor!.valueStep = 5;
       mockItemData = { id: 1, price: 15, isActive: true };
 
       editor = new SliderEditor(editorArguments);
       editor.loadValue(mockItemData);
-      const editorNumberElm = divContainer.querySelector<HTMLInputElement>('.input-group-text');
-      const editorInputElm = divContainer.querySelector<HTMLInputElement>('.slider-editor input.editor-price');
+      const editorNumberElm = divContainer.querySelector('.input-group-text') as HTMLInputElement;
+      const editorInputElm = divContainer.querySelector('.slider-editor input.editor-price') as HTMLInputElement;
 
       expect(editorInputElm.step).toBe('5');
       expect(editorNumberElm.textContent).toBe('15');
@@ -130,8 +130,8 @@ describe('SliderEditor', () => {
 
       editor = new SliderEditor(editorArguments);
 
-      const editorInputElm = divContainer.querySelector<HTMLInputElement>('.slider-editor input.editor-price');
-      const editorNumberElm = divContainer.querySelector<HTMLInputElement>('.input-group-text');
+      const editorInputElm = divContainer.querySelector('.slider-editor input.editor-price') as HTMLInputElement;
+      const editorNumberElm = divContainer.querySelector('.input-group-text') as HTMLInputElement;
 
       expect(editorInputElm.min).toBe('4');
       expect(editorInputElm.max).toBe('69');
@@ -145,8 +145,8 @@ describe('SliderEditor', () => {
       editor = new SliderEditor(editorArguments);
       editor.loadValue(mockItemData);
 
-      const editorInputElm = divContainer.querySelector<HTMLInputElement>('.slider-editor input.editor-price');
-      const editorNumberElm = divContainer.querySelector<HTMLInputElement>('.input-group-text');
+      const editorInputElm = divContainer.querySelector('.slider-editor input.editor-price') as HTMLInputElement;
+      const editorNumberElm = divContainer.querySelector('.input-group-text') as HTMLInputElement;
 
       expect(editor.getValue()).toEqual('4');
       expect(editorInputElm.min).toBe('0');
@@ -155,7 +155,7 @@ describe('SliderEditor', () => {
     });
 
     it('should create the input editor with default search terms range but without showing side numbers when "hideSliderNumber" is set in params', () => {
-      mockColumn.internalColumnEditor.params = { hideSliderNumber: true };
+      mockColumn.internalColumnEditor!.params = { hideSliderNumber: true };
       mockItemData = { id: 1, price: null, isActive: true };
 
       editor = new SliderEditor(editorArguments);
@@ -184,21 +184,23 @@ describe('SliderEditor', () => {
     it('should define an item datacontext containing a string as cell value and expect this value to be loaded in the editor when calling "loadValue"', () => {
       editor = new SliderEditor(editorArguments);
       editor.loadValue(mockItemData);
+      const editorInputElm = editor.editorInputDomElement;
       const editorElm = editor.editorDomElement;
 
       expect(editor.getValue()).toBe('213');
-      expect(editorElm[0].defaultValue).toBe('0');
+      expect(editorElm).toBeTruthy();
+      expect(editorInputElm.defaultValue).toBe('0');
     });
 
     it('should update slider number every time a change event happens on the input slider', () => {
-      mockColumn.internalColumnEditor.params = { hideSliderNumber: false };
+      mockColumn.internalColumnEditor!.params = { hideSliderNumber: false };
       mockItemData = { id: 1, price: 32, isActive: true };
       editor = new SliderEditor(editorArguments);
       editor.loadValue(mockItemData);
       editor.setValue(17);
 
-      const editorElm = divContainer.querySelector('.slider-container.slider-editor');
-      const editorNumberElm = divContainer.querySelector<HTMLInputElement>('.input-group-text');
+      const editorElm = divContainer.querySelector('.slider-container.slider-editor') as HTMLDivElement;
+      const editorNumberElm = divContainer.querySelector('.input-group-text') as HTMLInputElement;
       const mockEvent = new Event('change');
       Object.defineProperty(mockEvent, 'target', { writable: true, configurable: true, value: { value: '13' } });
       editorElm.dispatchEvent(mockEvent);
@@ -209,14 +211,14 @@ describe('SliderEditor', () => {
 
     describe('isValueChanged method', () => {
       it('should return True when previously dispatched change event is a different slider input number', () => {
-        mockColumn.internalColumnEditor.params = { sliderStartValue: 5 };
+        mockColumn.internalColumnEditor!.params = { sliderStartValue: 5 };
         mockItemData = { id: 1, price: 32, isActive: true };
         editor = new SliderEditor(editorArguments);
         editor.loadValue(mockItemData);
         editor.setValue(45);
 
-        const editorElm = divContainer.querySelector<HTMLInputElement>('.slider-editor input.editor-price');
-        editorElm.dispatchEvent(new CustomEvent('change'));
+        const editorElm = divContainer.querySelector('.slider-editor input.editor-price') as HTMLInputElement;
+        editorElm.dispatchEvent(new Event('change'));
 
         expect(editor.isValueChanged()).toBe(true);
       });
@@ -226,8 +228,8 @@ describe('SliderEditor', () => {
         editor = new SliderEditor(editorArguments);
         editor.loadValue(mockItemData);
 
-        const editorElm = divContainer.querySelector<HTMLInputElement>('.slider-editor input.editor-price');
-        editorElm.dispatchEvent(new CustomEvent('change'));
+        const editorElm = divContainer.querySelector('.slider-editor input.editor-price') as HTMLInputElement;
+        editorElm.dispatchEvent(new Event('change'));
 
         expect(editor.isValueChanged()).toBe(false);
       });
@@ -237,20 +239,20 @@ describe('SliderEditor', () => {
         editor = new SliderEditor(editorArguments);
         editor.loadValue(mockItemData);
 
-        const editorElm = divContainer.querySelector<HTMLInputElement>('.slider-editor input.editor-price');
-        editorElm.dispatchEvent(new CustomEvent('change'));
+        const editorElm = divContainer.querySelector('.slider-editor input.editor-price') as HTMLInputElement;
+        editorElm.dispatchEvent(new Event('change'));
 
         expect(editor.isValueChanged()).toBe(false);
       });
 
       it('should return False when previously dispatched change event is the same input number as "sliderStartValue" provided by the user', () => {
-        mockColumn.internalColumnEditor.params = { sliderStartValue: 5 };
+        mockColumn.internalColumnEditor!.params = { sliderStartValue: 5 };
         mockItemData = { id: 1, price: 5, isActive: true };
         editor = new SliderEditor(editorArguments);
         editor.loadValue(mockItemData);
 
-        const editorElm = divContainer.querySelector<HTMLInputElement>('.slider-editor input.editor-price');
-        editorElm.dispatchEvent(new CustomEvent('change'));
+        const editorElm = divContainer.querySelector('.slider-editor input.editor-price') as HTMLInputElement;
+        editorElm.dispatchEvent(new Event('change'));
 
         expect(editor.isValueChanged()).toBe(false);
       });
@@ -258,7 +260,7 @@ describe('SliderEditor', () => {
 
     describe('applyValue method', () => {
       it('should apply the value to the price property when it passes validation', () => {
-        mockColumn.internalColumnEditor.validator = null;
+        mockColumn.internalColumnEditor!.validator = null as any;
         mockItemData = { id: 1, price: 456, isActive: true };
 
         editor = new SliderEditor(editorArguments);
@@ -268,7 +270,7 @@ describe('SliderEditor', () => {
       });
 
       it('should apply the value to the price property with a field having dot notation (complex object) that passes validation', () => {
-        mockColumn.internalColumnEditor.validator = null;
+        mockColumn.internalColumnEditor!.validator = null as any;
         mockColumn.field = 'part.price';
         mockItemData = { id: 1, part: { price: 456 }, isActive: true };
 
@@ -279,7 +281,7 @@ describe('SliderEditor', () => {
       });
 
       it('should return item data with an empty string in its value when it fails the custom validation', () => {
-        mockColumn.internalColumnEditor.validator = (value: any, args: EditorArgs) => {
+        mockColumn.internalColumnEditor!.validator = (value: any) => {
           if (+value < 10) {
             return { valid: false, msg: 'Value must be over 10.' };
           }
@@ -336,7 +338,7 @@ describe('SliderEditor', () => {
       });
 
       it('should return serialized value as the custom "sliderStartValue" number when item value is null', () => {
-        mockColumn.internalColumnEditor.params = { sliderStartValue: 5 };
+        mockColumn.internalColumnEditor!.params = { sliderStartValue: 5 };
         mockItemData = { id: 1, price: null, isActive: true };
 
         editor = new SliderEditor(editorArguments);
@@ -412,8 +414,7 @@ describe('SliderEditor', () => {
         const spySave = jest.spyOn(editor, 'save');
         const editorElm = editor.editorDomElement;
 
-        editorElm.trigger('mouseup');
-        editorElm[0].dispatchEvent(new (window.window as any).Event('mouseup'));
+        editorElm.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true }));
 
         setTimeout(() => {
           expect(spyCommit).toHaveBeenCalled();
@@ -425,7 +426,7 @@ describe('SliderEditor', () => {
 
     describe('validate method', () => {
       it('should return False when field is required and field is empty', () => {
-        mockColumn.internalColumnEditor.required = true;
+        (mockColumn.internalColumnEditor as ColumnEditor).required = true;
         editor = new SliderEditor(editorArguments);
         const validation = editor.validate('');
 
@@ -433,8 +434,8 @@ describe('SliderEditor', () => {
       });
 
       it('should return False when field is not between minValue & maxValue defined', () => {
-        mockColumn.internalColumnEditor.minValue = 10;
-        mockColumn.internalColumnEditor.maxValue = 99;
+        (mockColumn.internalColumnEditor as ColumnEditor).minValue = 10;
+        (mockColumn.internalColumnEditor as ColumnEditor).maxValue = 99;
         editor = new SliderEditor(editorArguments);
         const validation = editor.validate(100);
 
diff --git a/src/app/modules/angular-slickgrid/editors/sliderEditor.ts b/src/app/modules/angular-slickgrid/editors/sliderEditor.ts
index b93347749..39f190d10 100644
--- a/src/app/modules/angular-slickgrid/editors/sliderEditor.ts
+++ b/src/app/modules/angular-slickgrid/editors/sliderEditor.ts
@@ -1,6 +1,7 @@
-import { Column, Editor, EditorArguments, EditorValidator, EditorValidatorOutput, ColumnEditor } from './../models/index';
+import { Column, Editor, EditorArguments, EditorValidator, EditorValidatorOutput, ColumnEditor, SlickGrid, GridOption } from './../models/index';
 import { getDescendantProperty, setDeepValue } from '../services/utilities';
 import { sliderValidator } from '../editorValidators/sliderValidator';
+import { BindingEventService } from '../services/bindingEvent.service';
 
 // using external non-typed js libraries
 declare const $: any;
@@ -10,22 +11,28 @@ const DEFAULT_MAX_VALUE = 100;
 const DEFAULT_STEP = 1;
 
 export class SliderEditor implements Editor {
+  protected _bindEventService: BindingEventService;
   protected _defaultValue = 0;
-  protected _elementRangeInputId!: string;
-  protected _elementRangeOutputId!: string;
-  protected _$editorElm: any;
-  protected _$input: any;
-  $sliderNumber: any;
-  originalValue: any;
+  protected _elementRangeInputId = '';
+  protected _elementRangeOutputId = '';
+  protected _editorElm!: HTMLDivElement;
+  protected _inputElm!: HTMLInputElement;
+  originalValue?: number | string;
+  sliderNumberElm: HTMLSpanElement | null = null;
 
   /** SlickGrid Grid object */
-  grid: any;
+  grid: SlickGrid;
 
-  constructor(protected args: EditorArguments) {
+  /** Grid options */
+  gridOptions: GridOption;
+
+  constructor(protected readonly args: EditorArguments) {
     if (!args) {
       throw new Error('[Angular-SlickGrid] Something is wrong with this grid, an Editor must always have valid arguments.');
     }
     this.grid = args.grid;
+    this.gridOptions = (this.grid.getOptions() || {}) as GridOption;
+    this._bindEventService = new BindingEventService();
     this.init();
   }
 
@@ -39,9 +46,14 @@ export class SliderEditor implements Editor {
     return this.columnDef && this.columnDef.internalColumnEditor || {};
   }
 
-  /** Get the Editor DOM Element */
-  get editorDomElement(): any {
-    return this._$input;
+  /** Getter for the Editor DOM Element */
+  get editorDomElement(): HTMLDivElement {
+    return this._editorElm;
+  }
+
+  /** Getter for the Editor Input DOM Element */
+  get editorInputDomElement(): HTMLInputElement {
+    return this._inputElm;
   }
 
   get hasAutoCommitEdit() {
@@ -55,102 +67,111 @@ export class SliderEditor implements Editor {
 
   /** Get the Validator function, can be passed in Editor property or Column Definition */
   get validator(): EditorValidator | undefined {
-    return this.columnEditor.validator || this.columnDef.validator;
+    return (this.columnEditor && this.columnEditor.validator) || (this.columnDef && this.columnDef.validator);
   }
 
   init(): void {
     const container = this.args && this.args.container;
 
-    // define the input & slider number IDs
-    const itemId = this.args && this.args.item && this.args.item.id;
-    this._elementRangeInputId = `rangeInput_${this.columnDef.id}_${itemId}`;
-    this._elementRangeOutputId = `rangeOutput_${this.columnDef.id}_${itemId}`;
-
-    // create HTML string template
-    const editorTemplate = this.buildTemplateHtmlString();
-    this._$editorElm = $(editorTemplate);
-    this._$input = this._$editorElm.children('input');
-    this.$sliderNumber = this._$editorElm.children('div.input-group-addon.input-group-append').children();
-    this.focus();
-
-    // watch on change event
-    this._$editorElm
-      .appendTo(container)
-      .on('mouseup', () => this.save());
-
-    // 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
-    if (!this.editorParams.hideSliderNumber) {
-      this._$editorElm.on('input change', (event: JQuery.Event & { target: HTMLInputElement }) => {
-        const value = event && event.target && event.target.value || '';
-        if (value) {
-          const elements = document.getElementsByClassName(this._elementRangeOutputId);
-          if (elements.length) {
-            elements[0].innerHTML = event.target.value;
-          }
-        }
-      });
+    if (container && this.columnDef) {
+      // define the input & slider number IDs
+      const itemId = this.args?.item?.id ?? '';
+      this._elementRangeInputId = `rangeInput_${this.columnDef.id}_${itemId}`;
+      this._elementRangeOutputId = `rangeOutput_${this.columnDef.id}_${itemId}`;
+
+      // create HTML string template
+      this._editorElm = this.buildTemplateHtml();
+      this._inputElm = this._editorElm.querySelector('input') as HTMLInputElement;
+      this.sliderNumberElm = this._editorElm.querySelector<HTMLSpanElement>(`span.input-group-text.${this._elementRangeOutputId}`);
+
+      this.focus();
+
+      // watch on change event
+      container.appendChild(this._editorElm);
+      this._bindEventService.bind(this._editorElm, ['change', 'mouseup', 'touchend'], () => this.save());
+
+      // 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
+      if (!this.editorParams.hideSliderNumber) {
+        this._bindEventService.bind(this._editorElm, ['input', 'change'], this.handleChangeSliderNumber.bind(this));
+      }
     }
   }
 
   cancel() {
-    this._$input.val(this.originalValue);
+    if (this._inputElm) {
+      this._inputElm.value = `${this.originalValue}`;
+    }
     this.args.cancelChanges();
   }
 
   destroy() {
-    if (this._$editorElm) {
-      this._$editorElm.off('input change mouseup touchend').remove();
-      this._$editorElm = null;
-    }
+    this._bindEventService.unbindAll();
   }
 
   focus() {
-    this._$editorElm.focus();
+    if (this._inputElm) {
+      this._inputElm.focus();
+    }
   }
 
   getValue(): string {
-    return this._$input.val() || '';
+    return this._inputElm?.value ?? '';
   }
 
   setValue(value: number | string) {
-    this._$input.val(value);
+    if (this._inputElm) {
+      this._inputElm.value = `${value}`;
+    }
+    if (this.sliderNumberElm) {
+      this.sliderNumberElm.textContent = `${value}`;
+    }
   }
 
   applyValue(item: any, state: any) {
-    const fieldName = this.columnDef && this.columnDef.field;
-    const isComplexObject = fieldName && fieldName.indexOf('.') > 0; // is the field a complex object, "address.streetNumber"
-
-    const validation = this.validate(state);
-    const newValue = (validation && validation.valid) ? state : '';
-
-    // set the new value to the item datacontext
-    if (isComplexObject) {
-      setDeepValue(item, fieldName, newValue);
-    } else {
-      item[fieldName] = newValue;
+    const fieldName = this.columnDef?.field ?? '';
+    if (fieldName !== undefined) {
+      const isComplexObject = fieldName?.indexOf('.') > 0; // is the field a complex object, "address.streetNumber"
+
+      const validation = this.validate(state);
+      const newValue = (validation && validation.valid) ? state : '';
+
+      // set the new value to the item datacontext
+      if (isComplexObject) {
+        // when it's a complex object, user could override the object path (where the editable object is located)
+        // else we use the path provided in the Field Column Definition
+        const objectPath = this.columnEditor?.complexObjectPath ?? fieldName ?? '';
+        setDeepValue(item, objectPath, newValue);
+      } else if (item) {
+        item[fieldName] = newValue;
+      }
     }
   }
 
-  isValueChanged() {
-    const elmValue = this._$input.val();
+  isValueChanged(): boolean {
+    const elmValue = this._inputElm?.value ?? '';
     return (!(elmValue === '' && this.originalValue === undefined)) && (+elmValue !== this.originalValue);
   }
 
   loadValue(item: any) {
-    const fieldName = this.columnDef && this.columnDef.field;
+    const fieldName = this.columnDef?.field ?? '';
+
 
     if (item && fieldName !== undefined) {
       // is the field a complex object, "address.streetNumber"
-      const isComplexObject = fieldName && fieldName.indexOf('.') > 0;
+      const isComplexObject = fieldName?.indexOf('.') > 0;
       let value = (isComplexObject) ? getDescendantProperty(item, fieldName) : (item.hasOwnProperty(fieldName) ? item[fieldName] : this._defaultValue);
 
       if (value === '' || value === null || value === undefined) {
         value = this._defaultValue; // load default value when item doesn't have any value
       }
       this.originalValue = +value;
-      this._$input.val(value);
-      this.$sliderNumber.html(value);
+      if (this._inputElm) {
+        this._inputElm.value = `${value}`;
+      }
+      if (this.sliderNumberElm) {
+        this.sliderNumberElm.textContent = `${value}`;
+      }
     }
   }
 
@@ -168,12 +189,12 @@ export class SliderEditor implements Editor {
   }
 
   serializeValue() {
-    const elmValue: string = this._$input.val();
+    const elmValue: string = this._inputElm?.value ?? '';
     return elmValue !== '' ? parseInt(elmValue, 10) : this.originalValue;
   }
 
   validate(inputValue?: any): EditorValidatorOutput {
-    const elmValue = (inputValue !== undefined) ? inputValue : this._$input && this._$input.val();
+    const elmValue = (inputValue !== undefined) ? inputValue : this._inputElm?.value;
     return sliderValidator(elmValue, {
       editorArgs: this.args,
       errorMessage: this.columnEditor.errorMessage,
@@ -191,8 +212,8 @@ export class SliderEditor implements Editor {
   /**
    * Create the HTML template as a string
    */
-  protected buildTemplateHtmlString() {
-    const fieldId = this.columnDef && this.columnDef.id;
+  protected buildTemplateHtml(): HTMLDivElement {
+    const columnId = this.columnDef?.id ?? '';
     const title = this.columnEditor && this.columnEditor.title || '';
     const minValue = this.columnEditor.hasOwnProperty('minValue') ? this.columnEditor.minValue : DEFAULT_MIN_VALUE;
     const maxValue = this.columnEditor.hasOwnProperty('maxValue') ? this.columnEditor.maxValue : DEFAULT_MAX_VALUE;
@@ -200,23 +221,42 @@ export class SliderEditor implements Editor {
     const step = this.columnEditor.hasOwnProperty('valueStep') ? this.columnEditor.valueStep : DEFAULT_STEP;
     this._defaultValue = defaultValue;
 
-    if (this.editorParams.hideSliderNumber) {
-      return `
-      <div class="slider-container slider-editor">
-        <input type="range" name="${this._elementRangeInputId}" title="${title}"
-          defaultValue="${defaultValue}" value="${defaultValue}"
-          min="${minValue}" max="${maxValue}" step="${step}"
-          class="form-control slider-editor-input editor-${fieldId} range ${this._elementRangeInputId}" />
-      </div>`;
+    const inputElm = document.createElement('input');
+    inputElm.name = this._elementRangeInputId;
+    inputElm.title = title;
+    inputElm.type = 'range';
+    inputElm.defaultValue = defaultValue;
+    inputElm.value = defaultValue;
+    inputElm.min = `${minValue}`;
+    inputElm.max = `${maxValue}`;
+    inputElm.step = `${step}`;
+    inputElm.className = `form-control slider-editor-input editor-${columnId} range ${this._elementRangeInputId}`;
+
+    const divContainerElm = document.createElement('div');
+    divContainerElm.className = 'slider-container slider-editor';
+    divContainerElm.appendChild(inputElm);
+
+    if (!this.editorParams.hideSliderNumber) {
+      divContainerElm.classList.add('input-group');
+
+      // <div class="input-group-addon input-group-append slider-value"><span class="input-group-text ${this._elementRangeOutputId}">${defaultValue}</span></div>
+      const spanGroupElm = document.createElement('span');
+      spanGroupElm.className = `input-group-text ${this._elementRangeOutputId}`;
+      spanGroupElm.textContent = `${defaultValue}`;
+
+      const divGroupAddonElm = document.createElement('div');
+      divGroupAddonElm.className = 'input-group-addon input-group-append slider-value';
+      divGroupAddonElm.appendChild(spanGroupElm);
+      divContainerElm.appendChild(divGroupAddonElm);
     }
 
-    return `
-      <div class="input-group slider-container slider-editor">
-        <input type="range" name="${this._elementRangeInputId}" title="${title}"
-          defaultValue="${defaultValue}" value="${defaultValue}"
-          min="${minValue}" max="${maxValue}" step="${step}"
-          class="form-control slider-editor-input editor-${fieldId} range ${this._elementRangeInputId}" />
-        <div class="input-group-addon input-group-append slider-value"><span class="input-group-text ${this._elementRangeOutputId}">${defaultValue}</span></div>
-      </div>`;
+    return divContainerElm;
+  }
+
+  protected handleChangeSliderNumber(event: Event) {
+    const value = (<HTMLInputElement>event.target)?.value ?? '';
+    if (value !== '' && this.sliderNumberElm) {
+      this.sliderNumberElm.textContent = value;
+    }
   }
 }
diff --git a/src/app/modules/angular-slickgrid/services/bindingEvent.service.ts b/src/app/modules/angular-slickgrid/services/bindingEvent.service.ts
index 496a0d7c0..77f898b01 100644
--- a/src/app/modules/angular-slickgrid/services/bindingEvent.service.ts
+++ b/src/app/modules/angular-slickgrid/services/bindingEvent.service.ts
@@ -4,9 +4,12 @@ export class BindingEventService {
   private _boundedEvents: ElementEventListener[] = [];
 
   /** Bind an event listener to any element */
-  bind(element: Element, eventName: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) {
-    element.addEventListener(eventName, listener, options);
-    this._boundedEvents.push({ element, eventName, listener });
+  bind(element: Element, eventNameOrNames: string | string[], listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) {
+    const eventNames = (Array.isArray(eventNameOrNames)) ? eventNameOrNames : [eventNameOrNames];
+    for (const eventName of eventNames) {
+      element.addEventListener(eventName, listener, options);
+      this._boundedEvents.push({ element, eventName, listener });
+    }
   }
 
   /** Unbind all will remove every every event handlers that were bounded earlier */
diff --git a/test/cypress/integration/example03.spec.js b/test/cypress/integration/example03.spec.js
index 92c58bf39..909bbddd9 100644
--- a/test/cypress/integration/example03.spec.js
+++ b/test/cypress/integration/example03.spec.js
@@ -42,8 +42,7 @@ describe('Example 3 - Grid with Editors', () => {
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).click();
     cy.get('.slider-editor input[type=range]').as('range')
       .invoke('val', 25)
-      .trigger('change')
-      .type('{enter}', { force: true });
+      .trigger('change');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).should('contain', '25');
 
     // change % Complete
@@ -116,8 +115,7 @@ describe('Example 3 - Grid with Editors', () => {
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).click();
     cy.get('.slider-editor input[type=range]').as('range')
       .invoke('val', 50)
-      .trigger('change')
-      .type('{enter}', { force: true });
+      .trigger('change');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '50');
 
     // change % Complete
@@ -194,8 +192,7 @@ describe('Example 3 - Grid with Editors', () => {
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).click();
     cy.get('.slider-editor input[type=range]').as('range')
       .invoke('val', 50)
-      .trigger('change')
-      .type('{enter}', { force: true });
+      .trigger('change');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '50');
 
     // change % Complete
diff --git a/test/cypress/package.json b/test/cypress/package.json
index 7f0f7f35c..5db00468a 100644
--- a/test/cypress/package.json
+++ b/test/cypress/package.json
@@ -10,7 +10,7 @@
   "author": "Ghislain B.",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^7.3.0",
+    "cypress": "^7.4.0",
     "mocha": "^8.4.0",
     "mochawesome": "^6.2.2"
   }