diff --git a/demos/aurelia/src/examples/slickgrid/example48.html b/demos/aurelia/src/examples/slickgrid/example48.html
index 21dbe6902..723de7a62 100644
--- a/demos/aurelia/src/examples/slickgrid/example48.html
+++ b/demos/aurelia/src/examples/slickgrid/example48.html
@@ -45,14 +45,14 @@ <h3>
   </aurelia-slickgrid>
 </div>
 
-<label class="checkbox-inline control-label mb-3">
+<label class="checkbox-inline control-label my-3">
   <input
     type="checkbox"
     data-test="enable-multi-selection"
     checked.bind="enableMultiSelection"
     change.trigger="toggleMultiSelection($event)"
   />
-  Enable multi-selection (Ctrl/Cmd-click or drag)
+  <b>Enable multi-selection</b> (Ctrl/Cmd-click or drag)
 </label>
 
 <h3>
diff --git a/demos/aurelia/test/cypress/e2e/example48.cy.ts b/demos/aurelia/test/cypress/e2e/example48.cy.ts
index fa612292a..5e7f31768 100644
--- a/demos/aurelia/test/cypress/e2e/example48.cy.ts
+++ b/demos/aurelia/test/cypress/e2e/example48.cy.ts
@@ -314,5 +314,40 @@ describe('Example 48 - Hybrid Selection Model', () => {
       cy.get('#selectionRange2').contains(/"fromRow":2,"fromCell":0,"toRow":2,"toCell":7/);
       cy.get('#selectionRange2').contains(/"fromRow":4,"fromCell":0,"toRow":4,"toCell":7/);
     });
+
+    it('should preserve row ranges when enabling multi-selection and show the live modifier-drag preview', () => {
+      const gridSelector = '#grid48-2';
+      const firstRange = '{"fromRow":0,"fromCell":0,"toRow":1,"toCell":7}';
+      const secondRange = '{"fromRow":3,"fromCell":0,"toRow":4,"toCell":7}';
+      const combinedRanges = `${firstRange}${secondRange}`;
+
+      cy.get(`${gridSelector} .slick-viewport-top.slick-viewport-left`).scrollTo('top');
+      cy.get(`${gridSelector} .slick-row[data-row="1"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get(`${gridSelector} .slick-row[data-row="2"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get(`${gridSelector} .slick-row[data-row="4"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get('[data-test="enable-multi-selection"]').uncheck();
+
+      const firstRowCell = `${gridSelector} .slick-row[data-row="0"] .slick-cell.l1.r1`;
+      cy.get(firstRowCell).dragStart();
+      cy.get(firstRowCell).dragCell(1, 0);
+      cy.dragEnd(gridSelector);
+      cy.get('#selectionRange2').should('have.text', firstRange);
+
+      cy.get('[data-test="enable-multi-selection"]').check();
+      cy.get('#selectionRange2').should('have.text', firstRange);
+
+      const secondRowCell = `${gridSelector} .slick-row[data-row="3"] .slick-cell.l1.r1`;
+      cy.get(secondRowCell).as('secondRowCell');
+      cy.get('@secondRowCell').trigger('mousedown', { which: 1, ctrlKey: true, force: true });
+      cy.get('@secondRowCell').trigger('mousemove', 30, 10, { ctrlKey: true, force: true });
+      cy.get('@secondRowCell').trigger('mousemove', 30, 52, { ctrlKey: true, force: true });
+
+      cy.get('#selectionRange2').should('have.text', combinedRanges);
+      cy.get(`${gridSelector} .slick-cell.selected`).should('have.length', 8 * 4);
+      cy.get(`${gridSelector} .slick-row[data-row="2"] .slick-cell.selected`).should('have.length', 0);
+
+      cy.dragEnd(gridSelector);
+      cy.get('#selectionRange2').should('have.text', combinedRanges);
+    });
   });
 });
diff --git a/demos/react/src/examples/slickgrid/Example48.tsx b/demos/react/src/examples/slickgrid/Example48.tsx
index d19ef9ffe..f00e899ed 100644
--- a/demos/react/src/examples/slickgrid/Example48.tsx
+++ b/demos/react/src/examples/slickgrid/Example48.tsx
@@ -271,9 +271,9 @@ const Example48: React.FC = () => {
         />
       </div>
 
-      <label className="checkbox-inline control-label mb-3">
-        <input type="checkbox" data-test="enable-multi-selection" checked={enableMultiSelection} onChange={toggleMultiSelection} /> Enable
-        multi-selection (Ctrl/Cmd-click or drag)
+      <label className="checkbox-inline control-label my-3">
+        <input type="checkbox" data-test="enable-multi-selection" checked={enableMultiSelection} onChange={toggleMultiSelection} />
+        <b className="ms-2">Enable multi-selection</b> (Ctrl/Cmd-click or drag)
       </label>
 
       <h3>
diff --git a/demos/react/test/cypress/e2e/example48.cy.ts b/demos/react/test/cypress/e2e/example48.cy.ts
index fa612292a..5e7f31768 100644
--- a/demos/react/test/cypress/e2e/example48.cy.ts
+++ b/demos/react/test/cypress/e2e/example48.cy.ts
@@ -314,5 +314,40 @@ describe('Example 48 - Hybrid Selection Model', () => {
       cy.get('#selectionRange2').contains(/"fromRow":2,"fromCell":0,"toRow":2,"toCell":7/);
       cy.get('#selectionRange2').contains(/"fromRow":4,"fromCell":0,"toRow":4,"toCell":7/);
     });
+
+    it('should preserve row ranges when enabling multi-selection and show the live modifier-drag preview', () => {
+      const gridSelector = '#grid48-2';
+      const firstRange = '{"fromRow":0,"fromCell":0,"toRow":1,"toCell":7}';
+      const secondRange = '{"fromRow":3,"fromCell":0,"toRow":4,"toCell":7}';
+      const combinedRanges = `${firstRange}${secondRange}`;
+
+      cy.get(`${gridSelector} .slick-viewport-top.slick-viewport-left`).scrollTo('top');
+      cy.get(`${gridSelector} .slick-row[data-row="1"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get(`${gridSelector} .slick-row[data-row="2"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get(`${gridSelector} .slick-row[data-row="4"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get('[data-test="enable-multi-selection"]').uncheck();
+
+      const firstRowCell = `${gridSelector} .slick-row[data-row="0"] .slick-cell.l1.r1`;
+      cy.get(firstRowCell).dragStart();
+      cy.get(firstRowCell).dragCell(1, 0);
+      cy.dragEnd(gridSelector);
+      cy.get('#selectionRange2').should('have.text', firstRange);
+
+      cy.get('[data-test="enable-multi-selection"]').check();
+      cy.get('#selectionRange2').should('have.text', firstRange);
+
+      const secondRowCell = `${gridSelector} .slick-row[data-row="3"] .slick-cell.l1.r1`;
+      cy.get(secondRowCell).as('secondRowCell');
+      cy.get('@secondRowCell').trigger('mousedown', { which: 1, ctrlKey: true, force: true });
+      cy.get('@secondRowCell').trigger('mousemove', 30, 10, { ctrlKey: true, force: true });
+      cy.get('@secondRowCell').trigger('mousemove', 30, 52, { ctrlKey: true, force: true });
+
+      cy.get('#selectionRange2').should('have.text', combinedRanges);
+      cy.get(`${gridSelector} .slick-cell.selected`).should('have.length', 8 * 4);
+      cy.get(`${gridSelector} .slick-row[data-row="2"] .slick-cell.selected`).should('have.length', 0);
+
+      cy.dragEnd(gridSelector);
+      cy.get('#selectionRange2').should('have.text', combinedRanges);
+    });
   });
 });
diff --git a/demos/vanilla/src/examples/example37.html b/demos/vanilla/src/examples/example37.html
index a2c9b13e2..2d6ffee37 100644
--- a/demos/vanilla/src/examples/example37.html
+++ b/demos/vanilla/src/examples/example37.html
@@ -61,7 +61,7 @@ <h5 class="title is-5">
       checked.bind="enableMultiSelection"
       onclick.trigger="toggleMultiSelection(event.target.checked)"
     />
-    Enable multi-selection (Ctrl/Cmd-click or drag) on both grids
+    <b>Enable multi-selection</b> (Ctrl/Cmd-click or drag) on both grids
   </label>
 </div>
 
diff --git a/demos/vue/src/components/Example48.vue b/demos/vue/src/components/Example48.vue
index 8f69059d3..55bfa4728 100644
--- a/demos/vue/src/components/Example48.vue
+++ b/demos/vue/src/components/Example48.vue
@@ -249,9 +249,9 @@ function toggleSubTitle() {
     </SlickgridVue>
   </div>
 
-  <label class="checkbox-inline control-label mb-3">
+  <label class="checkbox-inline control-label my-3">
     <input type="checkbox" data-test="enable-multi-selection" :checked="enableMultiSelection" @change="toggleMultiSelection" />
-    Enable multi-selection (Ctrl/Cmd-click or drag)
+    <b>Enable multi-selection</b> (Ctrl/Cmd-click or drag)
   </label>
 
   <h3>
diff --git a/demos/vue/test/cypress/e2e/example48.cy.ts b/demos/vue/test/cypress/e2e/example48.cy.ts
index fa612292a..5e7f31768 100644
--- a/demos/vue/test/cypress/e2e/example48.cy.ts
+++ b/demos/vue/test/cypress/e2e/example48.cy.ts
@@ -314,5 +314,40 @@ describe('Example 48 - Hybrid Selection Model', () => {
       cy.get('#selectionRange2').contains(/"fromRow":2,"fromCell":0,"toRow":2,"toCell":7/);
       cy.get('#selectionRange2').contains(/"fromRow":4,"fromCell":0,"toRow":4,"toCell":7/);
     });
+
+    it('should preserve row ranges when enabling multi-selection and show the live modifier-drag preview', () => {
+      const gridSelector = '#grid48-2';
+      const firstRange = '{"fromRow":0,"fromCell":0,"toRow":1,"toCell":7}';
+      const secondRange = '{"fromRow":3,"fromCell":0,"toRow":4,"toCell":7}';
+      const combinedRanges = `${firstRange}${secondRange}`;
+
+      cy.get(`${gridSelector} .slick-viewport-top.slick-viewport-left`).scrollTo('top');
+      cy.get(`${gridSelector} .slick-row[data-row="1"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get(`${gridSelector} .slick-row[data-row="2"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get(`${gridSelector} .slick-row[data-row="4"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get('[data-test="enable-multi-selection"]').uncheck();
+
+      const firstRowCell = `${gridSelector} .slick-row[data-row="0"] .slick-cell.l1.r1`;
+      cy.get(firstRowCell).dragStart();
+      cy.get(firstRowCell).dragCell(1, 0);
+      cy.dragEnd(gridSelector);
+      cy.get('#selectionRange2').should('have.text', firstRange);
+
+      cy.get('[data-test="enable-multi-selection"]').check();
+      cy.get('#selectionRange2').should('have.text', firstRange);
+
+      const secondRowCell = `${gridSelector} .slick-row[data-row="3"] .slick-cell.l1.r1`;
+      cy.get(secondRowCell).as('secondRowCell');
+      cy.get('@secondRowCell').trigger('mousedown', { which: 1, ctrlKey: true, force: true });
+      cy.get('@secondRowCell').trigger('mousemove', 30, 10, { ctrlKey: true, force: true });
+      cy.get('@secondRowCell').trigger('mousemove', 30, 52, { ctrlKey: true, force: true });
+
+      cy.get('#selectionRange2').should('have.text', combinedRanges);
+      cy.get(`${gridSelector} .slick-cell.selected`).should('have.length', 8 * 4);
+      cy.get(`${gridSelector} .slick-row[data-row="2"] .slick-cell.selected`).should('have.length', 0);
+
+      cy.dragEnd(gridSelector);
+      cy.get('#selectionRange2').should('have.text', combinedRanges);
+    });
   });
 });
diff --git a/frameworks/angular-slickgrid/src/demos/examples/example48.component.html b/frameworks/angular-slickgrid/src/demos/examples/example48.component.html
index 6caf36ff8..400e1357e 100644
--- a/frameworks/angular-slickgrid/src/demos/examples/example48.component.html
+++ b/frameworks/angular-slickgrid/src/demos/examples/example48.component.html
@@ -45,9 +45,9 @@ <h3>
     </angular-slickgrid>
   </div>
 
-  <label class="checkbox-inline control-label mb-3">
+  <label class="checkbox-inline control-label my-3">
     <input type="checkbox" data-test="enable-multi-selection" [checked]="enableMultiSelection" (change)="toggleMultiSelection($event)" />
-    Enable multi-selection (Ctrl/Cmd-click or drag)
+    <b>Enable multi-selection</b> (Ctrl/Cmd-click or drag)
   </label>
 
   <h3>
diff --git a/frameworks/angular-slickgrid/test/cypress/e2e/example48.cy.ts b/frameworks/angular-slickgrid/test/cypress/e2e/example48.cy.ts
index fa612292a..5e7f31768 100644
--- a/frameworks/angular-slickgrid/test/cypress/e2e/example48.cy.ts
+++ b/frameworks/angular-slickgrid/test/cypress/e2e/example48.cy.ts
@@ -314,5 +314,40 @@ describe('Example 48 - Hybrid Selection Model', () => {
       cy.get('#selectionRange2').contains(/"fromRow":2,"fromCell":0,"toRow":2,"toCell":7/);
       cy.get('#selectionRange2').contains(/"fromRow":4,"fromCell":0,"toRow":4,"toCell":7/);
     });
+
+    it('should preserve row ranges when enabling multi-selection and show the live modifier-drag preview', () => {
+      const gridSelector = '#grid48-2';
+      const firstRange = '{"fromRow":0,"fromCell":0,"toRow":1,"toCell":7}';
+      const secondRange = '{"fromRow":3,"fromCell":0,"toRow":4,"toCell":7}';
+      const combinedRanges = `${firstRange}${secondRange}`;
+
+      cy.get(`${gridSelector} .slick-viewport-top.slick-viewport-left`).scrollTo('top');
+      cy.get(`${gridSelector} .slick-row[data-row="1"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get(`${gridSelector} .slick-row[data-row="2"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get(`${gridSelector} .slick-row[data-row="4"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get('[data-test="enable-multi-selection"]').uncheck();
+
+      const firstRowCell = `${gridSelector} .slick-row[data-row="0"] .slick-cell.l1.r1`;
+      cy.get(firstRowCell).dragStart();
+      cy.get(firstRowCell).dragCell(1, 0);
+      cy.dragEnd(gridSelector);
+      cy.get('#selectionRange2').should('have.text', firstRange);
+
+      cy.get('[data-test="enable-multi-selection"]').check();
+      cy.get('#selectionRange2').should('have.text', firstRange);
+
+      const secondRowCell = `${gridSelector} .slick-row[data-row="3"] .slick-cell.l1.r1`;
+      cy.get(secondRowCell).as('secondRowCell');
+      cy.get('@secondRowCell').trigger('mousedown', { which: 1, ctrlKey: true, force: true });
+      cy.get('@secondRowCell').trigger('mousemove', 30, 10, { ctrlKey: true, force: true });
+      cy.get('@secondRowCell').trigger('mousemove', 30, 52, { ctrlKey: true, force: true });
+
+      cy.get('#selectionRange2').should('have.text', combinedRanges);
+      cy.get(`${gridSelector} .slick-cell.selected`).should('have.length', 8 * 4);
+      cy.get(`${gridSelector} .slick-row[data-row="2"] .slick-cell.selected`).should('have.length', 0);
+
+      cy.dragEnd(gridSelector);
+      cy.get('#selectionRange2').should('have.text', combinedRanges);
+    });
   });
 });
diff --git a/packages/common/src/extensions/__tests__/slickHybridSelectionModel.spec.ts b/packages/common/src/extensions/__tests__/slickHybridSelectionModel.spec.ts
index 6af55822c..bf003a7c0 100644
--- a/packages/common/src/extensions/__tests__/slickHybridSelectionModel.spec.ts
+++ b/packages/common/src/extensions/__tests__/slickHybridSelectionModel.spec.ts
@@ -222,15 +222,16 @@ describe('Row Selection Model Plugin', () => {
     });
   });
 
-  it('should expect that "setSelectedRows" is being triggered when "refreshSelections" is called with rowSelectColumnIds defined with column IDs', () => {
+  it('should preserve row ranges when "refreshSelections" is called with rowSelectColumnIds defined with column IDs', () => {
     vi.spyOn(gridStub, 'getVisibleColumns').mockReturnValueOnce([{ id: 'firstName', field: 'firstName', name: 'First Name' }]);
     vi.spyOn(gridStub, 'getColumns').mockReturnValueOnce(mockColumns);
 
     plugin = new SlickHybridSelectionModel({ rowSelectColumnIds: ['firstName'], selectActiveRow: false });
     plugin.init(gridStub);
 
-    vi.spyOn(plugin, 'getSelectedRows').mockReturnValue([0, 1]);
+    vi.spyOn(plugin, 'getSelectedRanges').mockReturnValue([new SlickRange(0, 0, 1, 2)]);
     const setSelectedRowsSpy = vi.spyOn(plugin, 'setSelectedRows');
+    const setSelectedRangesSpy = vi.spyOn(plugin, 'setSelectedRanges');
     const mouseEvent = addVanillaEventPropagation(new Event('mouseenter'));
     gridStub.onActiveCellChanged.notify({ cell: undefined as any, row: 3, grid: gridStub }, mouseEvent, gridStub);
     plugin.refreshSelections();
@@ -239,10 +240,11 @@ describe('Row Selection Model Plugin', () => {
     gridStub.onActiveCellChanged.notify({ cell: 0, row: 3, grid: gridStub }, mouseEvent, gridStub);
     plugin.refreshSelections();
 
-    expect(setSelectedRowsSpy).toHaveBeenCalledWith([0, 1]);
+    expect(setSelectedRowsSpy).not.toHaveBeenCalled();
+    expect(setSelectedRangesSpy).toHaveBeenCalledWith([expect.objectContaining({ fromCell: 0, fromRow: 0, toRow: 1 })], undefined, '');
   });
 
-  it('should expect that "setSelectedRows" is being triggered when "refreshSelections" is called with enableRowMoveManager enabled', () => {
+  it('should preserve row ranges when "refreshSelections" is called with enableRowMoveManager enabled', () => {
     vi.spyOn(gridStub, 'getVisibleColumns').mockReturnValueOnce([]);
     vi.spyOn(gridStub, 'getColumns').mockReturnValueOnce(mockColumns);
     mockGridOptions.enableRowMoveManager = true;
@@ -251,29 +253,29 @@ describe('Row Selection Model Plugin', () => {
     plugin = new SlickHybridSelectionModel({ selectActiveRow: false });
     plugin.init(gridStub);
 
-    vi.spyOn(plugin, 'getSelectedRows').mockReturnValue([0, 1]);
-    const setSelectedRowsSpy = vi.spyOn(plugin, 'setSelectedRows');
+    vi.spyOn(plugin, 'getSelectedRanges').mockReturnValue([new SlickRange(0, 0, 1, 2)]);
+    const setSelectedRangesSpy = vi.spyOn(plugin, 'setSelectedRanges');
     const mouseEvent = addVanillaEventPropagation(new Event('mouseenter'));
     gridStub.onActiveCellChanged.notify({ cell: 0, row: 3, grid: gridStub }, mouseEvent, gridStub);
     plugin.refreshSelections();
 
-    expect(setSelectedRowsSpy).toHaveBeenCalledWith([0, 1]);
+    expect(setSelectedRangesSpy).toHaveBeenCalledWith([new SlickRange(0, 0, 1, 2)], undefined, '');
   });
 
-  it('should expect that "setSelectedRows" is being triggered when "refreshSelections" is called with rowSelectOverride returning true', () => {
+  it('should preserve row ranges when "refreshSelections" is called with rowSelectOverride returning true', () => {
     vi.spyOn(gridStub, 'getVisibleColumns').mockReturnValueOnce([]);
     vi.spyOn(gridStub, 'getColumns').mockReturnValueOnce(mockColumns);
 
     plugin = new SlickHybridSelectionModel({ rowSelectOverride: () => true, selectActiveRow: false });
     plugin.init(gridStub);
 
-    vi.spyOn(plugin, 'getSelectedRows').mockReturnValue([0, 1]);
-    const setSelectedRowsSpy = vi.spyOn(plugin, 'setSelectedRows');
+    vi.spyOn(plugin, 'getSelectedRanges').mockReturnValue([new SlickRange(0, 0, 1, 2)]);
+    const setSelectedRangesSpy = vi.spyOn(plugin, 'setSelectedRanges');
     const mouseEvent = addVanillaEventPropagation(new Event('mouseenter'));
     gridStub.onActiveCellChanged.notify({ cell: 0, row: 3, grid: gridStub }, mouseEvent, gridStub);
     plugin.refreshSelections();
 
-    expect(setSelectedRowsSpy).toHaveBeenCalledWith([0, 1]);
+    expect(setSelectedRangesSpy).toHaveBeenCalledWith([new SlickRange(0, 0, 1, 2)], undefined, '');
   });
 
   it('should expect that "setSelectedRows" is being triggered when "refreshSelections" is called with selectionType set to "cell"', () => {
@@ -294,36 +296,36 @@ describe('Row Selection Model Plugin', () => {
     expect(setSelectedRangesSpy).toHaveBeenCalledWith([], undefined, '');
   });
 
-  it('should expect that "setSelectedRows" is being triggered when "refreshSelections" is called with selectionType set to "row"', () => {
+  it('should preserve row ranges when "refreshSelections" is called with selectionType set to "row"', () => {
     vi.spyOn(gridStub, 'getVisibleColumns').mockReturnValueOnce([]);
     vi.spyOn(gridStub, 'getColumns').mockReturnValueOnce(mockColumns);
 
     plugin = new SlickHybridSelectionModel({ selectionType: 'row', selectActiveRow: false });
     plugin.init(gridStub);
 
-    vi.spyOn(plugin, 'getSelectedRows').mockReturnValue([0, 1]);
-    const setSelectedRowsSpy = vi.spyOn(plugin, 'setSelectedRows');
+    vi.spyOn(plugin, 'getSelectedRanges').mockReturnValue([new SlickRange(0, 0, 1, 2)]);
+    const setSelectedRangesSpy = vi.spyOn(plugin, 'setSelectedRanges');
     const mouseEvent = addVanillaEventPropagation(new Event('mouseenter'));
     gridStub.onActiveCellChanged.notify({ cell: 0, row: 3, grid: gridStub }, mouseEvent, gridStub);
     plugin.refreshSelections();
 
-    expect(setSelectedRowsSpy).toHaveBeenCalledWith([0, 1]);
+    expect(setSelectedRangesSpy).toHaveBeenCalledWith([new SlickRange(0, 0, 1, 2)], undefined, '');
   });
 
-  it('should expect that "setSelectedRows" is being triggered when "refreshSelections" is called with rowSelectOverride returning true', () => {
+  it('should preserve row ranges when "refreshSelections" is called with rowSelectOverride returning true', () => {
     vi.spyOn(gridStub, 'getVisibleColumns').mockReturnValueOnce([]);
     vi.spyOn(gridStub, 'getColumns').mockReturnValueOnce(mockColumns);
 
     plugin = new SlickHybridSelectionModel({ rowSelectOverride: () => true, selectActiveRow: false });
     plugin.init(gridStub);
 
-    vi.spyOn(plugin, 'getSelectedRows').mockReturnValue([0, 1]);
-    const setSelectedRowsSpy = vi.spyOn(plugin, 'setSelectedRows');
+    vi.spyOn(plugin, 'getSelectedRanges').mockReturnValue([new SlickRange(0, 0, 1, 2)]);
+    const setSelectedRangesSpy = vi.spyOn(plugin, 'setSelectedRanges');
     const mouseEvent = addVanillaEventPropagation(new Event('mouseenter'));
     gridStub.onActiveCellChanged.notify({ cell: 0, row: 3, grid: gridStub }, mouseEvent, gridStub);
     plugin.refreshSelections();
 
-    expect(setSelectedRowsSpy).toHaveBeenCalledWith([0, 1]);
+    expect(setSelectedRangesSpy).toHaveBeenCalledWith([new SlickRange(0, 0, 1, 2)], undefined, '');
   });
 
   it('should not call "setSelectedRows" when cell/row are not defined', () => {
@@ -699,6 +701,33 @@ describe('Row Selection Model Plugin', () => {
       );
     });
 
+    it('should show the current row range during a modifier drag without accumulating intermediate ranges', () => {
+      plugin = new SlickHybridSelectionModel({ selectionType: 'row', enableMultiSelection: true, dragToSelect: true });
+      plugin.init(gridStub);
+      plugin.setSelectedRanges([new SlickRange(0, 0, 1, 2)]);
+
+      const setSelectedRangesSpy = vi.spyOn(plugin, 'setSelectedRanges');
+      const scrollEvent = addVanillaEventPropagation(new Event('scroll'));
+      plugin.getCellRangeSelector()!.onCellRangeSelecting.notify({ range: new SlickRange(2, 0, 2, 2), addToSelection: true } as any, scrollEvent, gridStub);
+      expect(plugin.getSelectedRanges()).toEqual([new SlickRange(0, 0, 1, 2), new SlickRange(2, 0, 2, 2)]);
+
+      plugin.getCellRangeSelector()!.onCellRangeSelecting.notify({ range: new SlickRange(2, 0, 3, 2), addToSelection: true } as any, scrollEvent, gridStub);
+      expect(plugin.getSelectedRanges()).toEqual([new SlickRange(0, 0, 1, 2), new SlickRange(2, 0, 3, 2)]);
+
+      plugin.getCellRangeSelector()!.onCellRangeSelected.notify({ range: new SlickRange(2, 0, 3, 2), addToSelection: true } as any, scrollEvent, gridStub);
+
+      expect(setSelectedRangesSpy).toHaveBeenCalledTimes(3);
+      expect(setSelectedRangesSpy).toHaveBeenCalledWith(
+        [
+          { fromCell: 0, fromRow: 0, toCell: 2, toRow: 1 },
+          { fromCell: 0, fromRow: 2, toCell: 2, toRow: 3 },
+        ],
+        undefined,
+        undefined
+      );
+      expect(plugin.getSelectedRanges()).toEqual([new SlickRange(0, 0, 1, 2), new SlickRange(2, 0, 3, 2)]);
+    });
+
     it('should be able to manually create Row Selection and then call "setSelectedRanges" when "onCellRangeSelected" event is triggered', () => {
       vi.spyOn(gridStub, 'getColumns').mockReturnValueOnce(mockColumns);
       const setSelectedRangeSpy = vi.spyOn(plugin, 'setSelectedRanges');
diff --git a/packages/common/src/extensions/slickHybridSelectionModel.ts b/packages/common/src/extensions/slickHybridSelectionModel.ts
index 00f461986..f1bfc0a98 100644
--- a/packages/common/src/extensions/slickHybridSelectionModel.ts
+++ b/packages/common/src/extensions/slickHybridSelectionModel.ts
@@ -21,6 +21,7 @@ export class SlickHybridSelectionModel implements SelectionModel<HybridSelection
   protected _dataView?: CustomDataView | SlickDataView;
   protected _grid!: SlickGrid;
   protected _eventHandler: SlickEventHandler;
+  protected _multiSelectionBaseRanges?: SlickRange[];
   protected _prevSelectedRow?: number;
   protected _prevKeyDown = '';
   protected _ranges: SlickRange[] = [];
@@ -267,7 +268,9 @@ export class SlickHybridSelectionModel implements SelectionModel<HybridSelection
 
   refreshSelections(): void {
     if (this._activeSelectionIsRow) {
-      this.setSelectedRows(this.getSelectedRows());
+      const lastCell = this._grid.getColumns().length - 1;
+      const ranges = this.getSelectedRanges().map((range) => new SlickRange(range.fromRow, 0, range.toRow, lastCell));
+      this.setSelectedRanges(ranges, undefined, '');
     } else {
       this.setSelectedRanges(this.getSelectedRanges(), undefined, '');
     }
@@ -638,6 +641,7 @@ export class SlickHybridSelectionModel implements SelectionModel<HybridSelection
   }
 
   protected handleBeforeCellRangeSelected(e: SlickEventData, cell: { row: number; cell: number }): boolean | void {
+    this._multiSelectionBaseRanges = undefined;
     if (this._activeSelectionIsRow) {
       let isRowMoveColumn = false;
       if (this.gridOptions.enableRowMoveManager) {
@@ -673,8 +677,19 @@ export class SlickHybridSelectionModel implements SelectionModel<HybridSelection
         return false;
       }
       const selectedRange = new SlickRange(args.range.fromRow, 0, args.range.toRow, this._grid.getColumns().length - 1);
-      const ranges =
-        args.addToSelection && this._options.enableMultiSelection ? [...this.getSelectedRanges(), selectedRange] : [selectedRange];
+      const isMultiSelection = args.addToSelection && this._options.enableMultiSelection;
+      let currentRanges = this.getSelectedRanges();
+      if (isMultiSelection) {
+        // A modifier drag emits multiple intermediate selecting events. Keep
+        // the ranges that existed when the drag started and replace only the
+        // temporary preview range on each event.
+        this._multiSelectionBaseRanges ??= currentRanges.slice();
+        currentRanges = this._multiSelectionBaseRanges;
+      }
+      const ranges = isMultiSelection ? [...currentRanges, selectedRange] : [selectedRange];
+      if (args.caller === 'onCellRangeSelected') {
+        this._multiSelectionBaseRanges = undefined;
+      }
       this.setSelectedRanges(ranges, undefined, args.selectionMode);
     } else {
       if (args.caller === 'onCellRangeSelecting') {
diff --git a/test/cypress/e2e/example37.cy.ts b/test/cypress/e2e/example37.cy.ts
index 083243ea8..aefe48b22 100644
--- a/test/cypress/e2e/example37.cy.ts
+++ b/test/cypress/e2e/example37.cy.ts
@@ -373,5 +373,40 @@ describe('Example 37 - Hybrid Selection Model', () => {
       cy.get('#selectionRange2').contains(/"fromRow":2,"fromCell":0,"toRow":2,"toCell":7/);
       cy.get('#selectionRange2').contains(/"fromRow":4,"fromCell":0,"toRow":4,"toCell":7/);
     });
+
+    it('should preserve row ranges when enabling multi-selection and show the live modifier-drag preview', () => {
+      const gridSelector = '.grid37-2';
+      const firstRange = '{"fromRow":0,"fromCell":0,"toRow":1,"toCell":7}';
+      const secondRange = '{"fromRow":3,"fromCell":0,"toRow":4,"toCell":7}';
+      const combinedRanges = `${firstRange}${secondRange}`;
+
+      cy.get(`${gridSelector} .slick-viewport-top.slick-viewport-left`).scrollTo('top');
+      cy.get(`${gridSelector} .slick-row[data-row="1"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get(`${gridSelector} .slick-row[data-row="2"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get(`${gridSelector} .slick-row[data-row="4"] input[type=checkbox]`).uncheck({ force: true });
+      cy.get('[data-test="enable-multi-selection"]').uncheck();
+
+      const firstRowCell = `${gridSelector} .slick-row[data-row="0"] .slick-cell.l1.r1`;
+      cy.get(firstRowCell).dragStart();
+      cy.get(firstRowCell).dragCell(1, 0);
+      cy.dragEnd(gridSelector);
+      cy.get('#selectionRange2').should('have.text', firstRange);
+
+      cy.get('[data-test="enable-multi-selection"]').check();
+      cy.get('#selectionRange2').should('have.text', firstRange);
+
+      const secondRowCell = `${gridSelector} .slick-row[data-row="3"] .slick-cell.l1.r1`;
+      cy.get(secondRowCell).as('secondRowCell');
+      cy.get('@secondRowCell').trigger('mousedown', { which: 1, ctrlKey: true, force: true });
+      cy.get('@secondRowCell').trigger('mousemove', 30, 10, { ctrlKey: true, force: true });
+      cy.get('@secondRowCell').trigger('mousemove', 30, 52, { ctrlKey: true, force: true });
+
+      cy.get('#selectionRange2').should('have.text', combinedRanges);
+      cy.get(`${gridSelector} .slick-cell.selected`).should('have.length', 8 * 4);
+      cy.get(`${gridSelector} .slick-row[data-row="2"] .slick-cell.selected`).should('have.length', 0);
+
+      cy.dragEnd(gridSelector);
+      cy.get('#selectionRange2').should('have.text', combinedRanges);
+    });
   });
 });