fixes #388, #fixes #389

docs/resources/changelog.md

@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Fixed a bug where toggling `open` on `sl-drawer` would skip the transition
 - Fixed a bug where `sl-color-picker` could be opened when disabled
+- Fixed a bug in `sl-color-picker` that caused erratic slider behaviors [#388](https://github.com/shoelace-style/shoelace/issues/388) [#389](https://github.com/shoelace-style/shoelace/issues/389)
 - Renamed `components.json` to `metadata.json`
 - Updated to the prerelease versions of LitElement and lit-html
 - Updated to Bootstrap Icons 1.4.1

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

@@ -579,11 +579,12 @@ export default class SlColorPicker extends LitElement {
       this.inputValue = this.opacity ? currentColor.hexa : currentColor.hex;
     }
 
-    // Setting this.value will trigger the watcher which parses the new color. We want to bypass that behavior because
-    // a) we've already done it in this function and b) conversion/rounding can lead to values changing slightly.
+    // Setting this.value will trigger the watcher which parses the new value. We want to bypass that behavior because
+    // we've already parsed the color here and conversion/rounding can lead to values changing slightly. After the next
+    // update, the usual behavior is restored.
     this.bypassValueParse = true;
     this.value = this.inputValue;
-    this.bypassValueParse = false;
+    this.updateComplete.then(() => (this.bypassValueParse = false));
   }
 
   @watch('format')