only emit sl-change when you stop dragging

src/components/color-picker/color-picker.component.ts

@@ -243,7 +243,8 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
     const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__alpha')!;
     const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
     const { width } = container.getBoundingClientRect();
-    let oldValue = this.value;
+    let initialValue = this.value;
+    let currentValue = this.value;
 
     handle.focus();
     event.preventDefault();
@@ -253,12 +254,17 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
         this.alpha = clamp((x / width) * 100, 0, 100);
         this.syncValues();
 
-        if (this.value !== oldValue) {
-          oldValue = this.value;
-          this.emit('sl-change');
+        if (this.value !== currentValue) {
+          currentValue = this.value;
           this.emit('sl-input');
         }
       },
+      onStop: () => {
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit('sl-change');
+        }
+      },
       initialEvent: event
     });
   }
@@ -267,7 +273,8 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
     const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__hue')!;
     const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
     const { width } = container.getBoundingClientRect();
-    let oldValue = this.value;
+    let initialValue = this.value;
+    let currentValue = this.value;
 
     handle.focus();
     event.preventDefault();
@@ -277,12 +284,17 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
         this.hue = clamp((x / width) * 360, 0, 360);
         this.syncValues();
 
-        if (this.value !== oldValue) {
-          oldValue = this.value;
-          this.emit('sl-change');
+        if (this.value !== currentValue) {
+          currentValue = this.value;
           this.emit('sl-input');
         }
       },
+      onStop: () => {
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit('sl-change');
+        }
+      },
       initialEvent: event
     });
   }
@@ -291,7 +303,8 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
     const grid = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__grid')!;
     const handle = grid.querySelector<HTMLElement>('.color-picker__grid-handle')!;
     const { width, height } = grid.getBoundingClientRect();
-    let oldValue = this.value;
+    let initialValue = this.value;
+    let currentValue = this.value;
 
     handle.focus();
     event.preventDefault();
@@ -304,13 +317,18 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
         this.brightness = clamp(100 - (y / height) * 100, 0, 100);
         this.syncValues();
 
-        if (this.value !== oldValue) {
-          oldValue = this.value;
-          this.emit('sl-change');
+        if (this.value !== currentValue) {
+          currentValue = this.value;
           this.emit('sl-input');
         }
       },
-      onStop: () => (this.isDraggingGridHandle = false),
+      onStop: () => {
+        this.isDraggingGridHandle = false;
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit('sl-change');
+        }
+      },
       initialEvent: event
     });
   }