reactjscolor-pickerreact-color

React color ChromePicker alpha slider does not work. Is required use Alpha individual API?

Im trying to implement react-color from https://casesandberg.github.io/react-color/#examples I'm using the ChromePicker component, but the Alpha slider is not working, as expected. The slider bar is working, but the slider bullet is not moving on.

Here is the https://codesandbox.io/s/react-color-nkh7w example. Is there any component missing?

Solution

  • The problem is that react-color components (like the ChromePicker you are using) do not accept properties for alpha/opacity directly. You have two options:

    1. Using the color.rgb value only, and don't separate the alpha. If you pass the rgb object as the color property), it should work as expected.
    2. You can take the color.rgb.a value, convert it to hex, and append it to the color.hex string.