[color-slider] inside [color-picker] Jzazbz: jz and bz slider glitches

[sidewayss]

In your docs page: https://elements.colorjs.io/src/color-picker/#dynamic

• select Jzazbz as the color space
• note that the top and bottom slider tracks are white
• slide the jz slider to the right and at one point you'll see the bz slider suddenly have color
• the thumbs on the sliders change color, but the track stays white.

[DmitrySharabin]

It looks like we have this issue because some of the slider's color stops have the value lab(NaN% NaN NaN). This definitely should not happen.

[DmitrySharabin]

Actually, we have a FIXME comment from Lea there:

elements/src/color-slider/color-slider.js

Line 74 in 24ac3f7

// FIXME will fail if there are none values

@LeaVerou, could you please elaborate a bit on what should happen with such colors?

[sidewayss]

Is this simply a case of null needing to be converted to zero? CSS none is null in Color.js, and parseFloat() converts null to NaN. Excuse me if I'm way off base here, this code goes on to do a lot that I don't understand.

btw - It looks like you just changed the way you display the numeric inputs that display above the sliders. It's an improvement, but you should consider using my <input-num> element :-) I'd obviously love to see it used, but it really is a huge set of improvements over <input type="number">, which is widely disparaged, and with good reason. There's a test/demo app here, so you can put it through its paces: https://sidewayss.github.io/html-elements/apps/input-num/

I should have an NPM package ready later this week, along with a dist/ directory for bundled files, if you need one of those. For now you can link directly to:

https://sidewayss.github.io/html-elements/input-num.js

To my surprise, the most novel thing about <input-num> and the other elements in that repo is that I haven't seen other examples of externalizing the templates and letting the user configure the path to the template file(s). It does offer great graphic control.

[LeaVerou]

null should not usually be converted to 0, that's a last ditch effort. If we're interpolating, null should be converted to the corresponding value in the previous/next stop (adding two stops if these are different).

[DmitrySharabin]

Digging into this a bit more, I learned that the actual line where we get value like lab(NaN% NaN NaN) is this one:

elements/src/color-slider/color-slider.js

Line 102 in 2adcc7d

stops = stops.map(color => color.display()).join(", ");

Precisely, the display() method. So, it's not that we work with colors with some coords equal to null, none, or NaN, but we have no displayable CSS colors for some color stops. What is the best strategy in this case? Is it possible to filter out colors we can't display and use the rest? Something like this:

stops = stops.map(color => color.display()).filter(c => c.color.coords.every(coord => !Number.isNaN(coord))).join(", ");

However, we might end up with a thumb color that does not correspond to the slider's color at that point. And that's not correct, right?

[sidewayss]

In this specific case, should there even be undisplayable stops that need filtering? Or is there something wrong in specifying the undisplayable stops? There should be a fully displayable set of stops for every supported color channel, right?

That's not to say you don't need to answer your general question of how to deal with illegitimate stops when they arise inside this element, if the user sets something wrong. That might be more of an issue for <color-slider> than <channel-slider>. I think I got the tag name wrong in the title for this issue. This here is a <channel-slider>, right?

You just caused me to ask this question that I posted in the Discussions on the main color.js repo.

[DmitrySharabin]

That might be more of an issue for <color-slider> than <channel-slider>. I think I got the tag name wrong in the title for this issue. This here is a <channel-slider>, right?

No-no, you tagged the element right. It's just easier for me to see the issue with the isolated channel. See

<channel-slider> uses <color-slider> under the hood.

[sidewayss]

<channel-slider> uses <color-slider> under the hood.

Ha! I had it backwards based on reading the online docs. Thanks for clarifying. (not that the docs are wrong).