fix(slider): dragging range fires input event

src/components/slider/slider.e2e.ts

@@ -561,6 +561,38 @@ describe("calcite-slider", () => {
       expect(inputEvent).toHaveReceivedEventTimes(5);
       expect(changeEvent).toHaveReceivedEventTimes(1);
     });
+
+    it("range: clicking and dragging the range changes minValue and maxValue on mousedown, emits on mouseup", async () => {
+      const page = await newE2EPage();
+      await page.setContent(
+        html`<calcite-slider
+          min-value="0"
+          max-value="50"
+          snap
+          style="width:${sliderWidthFor1To1PixelValueTrack}"
+        ></calcite-slider>`
+      );
+      const slider = await page.find("calcite-slider");
+      const inputEvent = await slider.spyOnEvent("calciteSliderInput");
+      const changeEvent = await slider.spyOnEvent("calciteSliderChange");
+      const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+
+      await page.mouse.move(trackX + 25, trackY);
+      await page.mouse.down();
+      await page.mouse.move(trackX + 26, trackY);
+      await page.mouse.move(trackX + 27, trackY);
+      await page.mouse.move(trackX + 28, trackY);
+      await page.mouse.move(trackX + 29, trackY);
+      await page.mouse.move(trackX + 30, trackY);
+      await page.mouse.move(trackX + 31, trackY);
+      await page.mouse.up();
+      await page.waitForChanges();
+
+      expect(await slider.getProperty("minValue")).toBe(5);
+      expect(await slider.getProperty("maxValue")).toBe(55);
+      expect(inputEvent).toHaveReceivedEventTimes(6);
+      expect(changeEvent).toHaveReceivedEventTimes(1);
+    });
   });
 
   describe("histogram", () => {

src/components/slider/slider.tsx

@@ -38,6 +38,7 @@ import {
 import { CSS } from "./resources";
 
 type ActiveSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue";
+type SetValueProperty = Exclude<ActiveSliderProperty, "minMaxValue">;
 
 function isRange(value: number | number[]): value is number[] {
   return Array.isArray(value);
@@ -824,7 +825,9 @@ export class Slider
     }
     event.preventDefault();
     const fixedDecimalAdjustment = Number(adjustment.toFixed(decimalPlaces(step)));
-    this.setValue(activeProp, this.clamp(fixedDecimalAdjustment, activeProp));
+    this.setValue({
+      [activeProp as SetValueProperty]: this.clamp(fixedDecimalAdjustment, activeProp)
+    });
   }
 
   @Listen("pointerdown")
@@ -849,7 +852,7 @@ export class Slider
     this.dragStart(prop);
     const isThumbActive = this.el.shadowRoot.querySelector(".thumb:active");
     if (!isThumbActive) {
-      this.setValue(prop, this.clamp(position, prop));
+      this.setValue({ [prop as SetValueProperty]: this.clamp(position, prop) });
     }
     this.focusActiveHandle(x);
   }
@@ -1040,16 +1043,18 @@ export class Slider
             newMinValue >= this.min &&
             newMaxValue - newMinValue === this.minMaxValueRange
           ) {
-            this.minValue = this.clamp(newMinValue, "minValue");
-            this.maxValue = this.clamp(newMaxValue, "maxValue");
+            this.setValue({
+              minValue: this.clamp(newMinValue, "minValue"),
+              maxValue: this.clamp(newMaxValue, "maxValue")
+            });
           }
         } else {
           this.minValueDragRange = value - this.minValue;
           this.maxValueDragRange = this.maxValue - value;
           this.minMaxValueRange = this.maxValue - this.minValue;
         }
       } else {
-        this.setValue(this.dragProp, this.clamp(value, this.dragProp));
+        this.setValue({ [this.dragProp as SetValueProperty]: this.clamp(value, this.dragProp) });
       }
     }
   };
@@ -1091,19 +1096,32 @@ export class Slider
   }
 
   /**
-   * Set the prop value if changed at the component level
+   * Set prop value(s) if changed at the component level
    *
-   * @param valueProp
-   * @param value
+   * @param {object} values - a set of key/value pairs delineating what properties in the component to update
    */
-  private setValue(valueProp: string, value: number): void {
-    const oldValue = this[valueProp];
-    const valueChanged = oldValue !== value;
+  private setValue(
+    values: Partial<{
+      [Property in keyof Pick<Slider, "maxValue" | "minValue" | "value">]: number;
+    }>
+  ): void {
+    let valueChanged: boolean;
+
+    Object.keys(values).forEach((propName) => {
+      const newValue = values[propName];
+
+      if (!valueChanged) {
+        const oldValue = this[propName];
+        valueChanged = oldValue !== newValue;
+      }
+
+      this[propName] = newValue;
+    });
 
     if (!valueChanged) {
       return;
     }
-    this[valueProp] = value;
+
     const dragging = this.dragProp;
     if (!dragging) {
       this.emitChange();