fix(slider): allow range handle dragging in either direction when both handles share the same position

packages/calcite-components/src/components/slider/slider.e2e.ts

@@ -658,15 +658,15 @@ describe("calcite-slider", () => {
 
     it("does not allow text selection when slider is used", async () => {
       const page = await newE2EPage({
-        html: `<calcite-slider 
-          value="30" 
-          label-handles 
-          label-ticks 
-          max-label="100" 
-          ticks="10" 
-          min="0" 
-          max="100" 
-          value="50" 
+        html: `<calcite-slider
+          value="30"
+          label-handles
+          label-ticks
+          max-label="100"
+          ticks="10"
+          min="0"
+          max="100"
+          value="50"
           step="1"
         >
         </calcite-slider>`,
@@ -736,6 +736,7 @@ describe("calcite-slider", () => {
     let changeEvent: EventSpy;
     let inputEvent: EventSpy;
     let element: E2EElement;
+    let handleRect: DOMRect;
     let trackRect: DOMRect;
 
     const commonSliderAttrs = `
@@ -760,6 +761,7 @@ describe("calcite-slider", () => {
       await page.setContent(html`<calcite-slider ${sliderAttrs}></calcite-slider>`);
 
       element = await page.find("calcite-slider");
+      handleRect = await getElementRect(page, "calcite-slider", `.${CSS.handle}`);
       trackRect = await getElementRect(page, "calcite-slider", `.${CSS.track}`);
       changeEvent = await element.spyOnEvent("calciteSliderChange");
       inputEvent = await element.spyOnEvent("calciteSliderInput");
@@ -825,6 +827,27 @@ describe("calcite-slider", () => {
         expect(isMinThumbFocused).toBe(true);
         await assertValuesUnchanged(expectedValue);
       });
+
+      it("pressing mouse down on right side of handle and dragging towards the left shifts drag to the min handle", async () => {
+        await setUpTest(`${commonSliderAttrs} min-value="${expectedValue}" max-value="${expectedValue}"`);
+
+        await assertValuesUnchanged(expectedValue);
+
+        const initialMinValue = expectedValue;
+        const rightHalfOfHandleCircleDragTarget = handleRect.x + handleRect.width - 2;
+
+        await page.mouse.move(rightHalfOfHandleCircleDragTarget, handleRect.y);
+        await page.mouse.down();
+        await page.mouse.move(rightHalfOfHandleCircleDragTarget - 10, handleRect.y);
+        await page.mouse.up();
+        await page.waitForChanges();
+
+        const isMinHandleFocused = await isElementFocused(page, `.${CSS.thumbMinValue}`, { shadowed: true });
+
+        expect(isMinHandleFocused).toBe(true);
+        const newMinValue = await element.getProperty("value")[0];
+        expect(newMinValue).not.toBe(initialMinValue);
+      });
     });
   });
 

packages/calcite-components/src/components/slider/slider.tsx

@@ -114,6 +114,21 @@ export class Slider
           this.maxValueDragRange = this.maxValue - value;
           this.minMaxValueRange = this.maxValue - this.minValue;
         }
+      } else if (
+        isRange(this.value) &&
+        isRange(this.previousEmittedValue) &&
+        this.dragProp === "maxValue"
+      ) {
+        const [previousEmittedMinValue, previousEmittedMaxValue] = this.previousEmittedValue;
+        if (
+          previousEmittedMinValue === previousEmittedMaxValue &&
+          value < previousEmittedMinValue
+        ) {
+          this.dragProp = "minValue";
+          this.minHandle.focus();
+        } else {
+          this.setValue({ [this.dragProp as SetValueProperty]: this.clamp(value, this.dragProp) });
+        }
       } else {
         this.setValue({ [this.dragProp as SetValueProperty]: this.clamp(value, this.dragProp) });
       }
@@ -159,6 +174,8 @@ export class Slider
     this.dragEnd(event);
   };
 
+  private previousEmittedValue;
+
   private trackEl: HTMLDivElement;
 
   // #endregion
@@ -368,6 +385,7 @@ export class Slider
     this.setValueFromMinMax();
     connectLabel(this);
     connectForm(this);
+    this.previousEmittedValue = this.value;
   }
 
   load(): void {
@@ -639,6 +657,7 @@ export class Slider
 
   private emitChange(): void {
     this.calciteSliderChange.emit();
+    this.previousEmittedValue = this.value;
   }
 
   private removeDragListeners() {