When turning off Rec2020, Chroma value doesn't change even though the slider rescales

[NikilXYZ]

Try this color: oklch(83% 0.37 145.2)
Toggle Rec2020 on. You'll see the slider rescale. Move the slider all the way up to the max value - from 0.37, it should be 0.47. (You'll end up at a color that can't be displayed).
Now toggle Rec2020 off. The slider would have reset, but the number on that graph still says 0.47. If you drag the slider a tad it resets.

Assuming this picker was written with React, I think this is a 1 or 2 line of code fix? Either pass in a prop, check that a provider for the C value is being consumed correctly (or being updated correctly), or add the C value state variable to a useEffect observer array.

[ai]

Assuming this picker was written with React

Of course not. It is vanilla JS.

I think this is a 1 or 2 line of code fix?

Is it OK that Rec2020 checkbox will change the current color?

[NikilXYZ]

Yea, I saw the code after and I was impressed XD.

Yes. The important thing is that number and slider should be in-sync.

I think it should change the current color only by clamping the chroma to the max value in the rescaled chart. Your slider already behaves that way even if the number doesn't. Try going to oklch(83% 0.458 152) and toggle the Rec2020 button on then off then on again. See how the slider position is now already clipped? The number and slider are not in-sync.

The other simple way to solve this without color change is just to not rescale the chroma vs hue graph and chroma vs lightness graphs. Chroma max selectable value would always be .47

[ai]

Another case. If user will enable Rec2020 and then will choose oklch(83% 1 152) where chrome will above the max in slides? The problem is that in OKLCH there is no max chrome, but we need to add some max for slide. What we should do?

[ai]

What if we will hide slider pin if the current chrome value is above the max in slider? User still can click in any area of slider to move value there.

[NikilXYZ]

I guess that's an option. Make the slider pin out of bounds essentially. I guess that would also ensure that it matches the text in the box.

I think this is the best solution because it avoids side effects of changing the color until the user specifically interacts with the color

[romashamin]

Hey @NikilXYZ,thank you for this case!

@ai, I believe that if the slider’s maximum range changes and the slider’s handle remains in its current position within this new maximum, the UI should update the values in the text fields to match the new maximum value.