Calcite-components: Enhancement: calcite-color-picker (calciteColorPickerChange)

[rslibed]

Description

When using calcite-color-picker, the calciteColorPickerChange event fires while the thumb is dragged.

Acceptance Criteria

Detect a value change only when the user completes the thumb drag.

Which Component

calcite-color-picker

Example Use Case

Configuration app makes network requests when input events are fired and has very chatty behavior with the current behavior of the calciteColorPickerChangeevent. It would be ideal if a value is written once when a user completes a thumb drag rather than writing multiple values from a series of calciteColorPickerChange event fires during the thumb drag.

[jcfranco]

Did some research on this and found a few libs that do this via 2 events (similar to <input>'s input and change events):

• https://material-ui.com/api/slider/ (change + changeCommitted)
• https://ant.design/components/slider/#components-slider-demo-event (change + afterChange)
• https://opensource.adobe.com/spectrum-web-components/components/slider (input + change)
• https://sapui5.hana.ondemand.com/#/api/sap.m.Slider%23events/Summary (liveChange + change)
• https://github.com/material-components/material-components-web-components/blob/master/packages/slider/README.md (input + change)

I think following input + change would be the simplest option. These names align with existing events with the same semantics and we could apply this to other components as well.

@driskull @eriklharper @paulcpederson WDYT?

[driskull]

Agreed. input + change.

[eriklharper]

input + change feels right, its the most idiomatic.