React-color: SliderPicker display issue when managing color state as hex or rgb

[amkoehler]

Hi,

Thanks for your hard work on this library. It is incredibly useful. I am using the SliderPicker component and have a minor issue with the 'shade buttons' that appears below the slider. The darkest shade button will never show as selected when clicked, but the 4 lighter shades displayed as selected just fine. I was a little stumped because your example page shows it working fine, until I looked at your source and realized the state for your SliderPicker was managed as hsl and not hex or rgb. After switching to my color state to be hsl the darkest shade shows selected as expected.

To clarify, by 'selected' I mean when the shade button is clicked it has the scale(1.8) applied to it so that it increases in size compared to the rest of the shades.

[casesandberg]

Hmm, so it only has the expected "selected" behavior if you track it and save it in HSL? This is certainly a bug.

[andrew-pyle]

@casesandberg I'm interested in trying to make this work, but I have no experience with the codebase. Can you point me to some potential locations for this bug?

[casesandberg]

It looks like it is determining if the swatch is active based on some crude math calculations based solely on HSL: https://github.com/casesandberg/react-color/blob/master/src/components/slider/SliderSwatches.js#L67-L68

I would start by investigating there to see what HSL values are coming in when you are passing down hex or rgb. It is more than likely the problem is in the color conversion library that we are using (it is lossy at times between color spaces)