Add Lab Color Sliders not working

[pitpik]

Add Lab Color Sliders not working

[PitPik]

Hi @Horray ,
you forgot to write what to do in line 117:

if (child.id) {
    child.children[0].style.width = ((color.RND[type][mode] - ...

So, child.children[0].style.width = is missing.
Still, Lab is different (negative values and no normalized value range) so it might be more complex to solve that...

BTW: I'm happy to help out if things are not clear with color picker, but I can't spend too much time helping people programming their own things. Please don't put issues on this page that are not really related to clorPicker. Thanks.

[Horray]

Oh okay. I understand! But the reason I did ask it here, was because it's related to the documentation page and color.js.
But thanks anyway for your earlier help!

[Horray]

Also, the more I look into it, the more I think the problem is with the setColor function, which ultimately is convertColors function. So I don't think this is off topic.

[PitPik]

With setColor you can set a color (or part of a color) and it will then calculate all the other color spaces and return an object including all those:

myColor.setColor({
    r: 200,
    g: 100
}, 'rgb', 1);

Inspect the returned Object to see what you get
And, if you only want to set alpha:

myColor.setColor({}, 'rgb', 0.5);

...or just set it in myColor.colors.alpha = 0.5

[Horray]

With a little outside help, I got the L working correctly but the A and B has weird behavior. I added some code to the slideMove function:

sliderMove = function (e) {
    if (type === 'Lab') {
        var currentLab = myColor.colors.Lab;
        var factor = (e.clientX - startPoint.left) / currentTargetWidth;
        currentLab[mode] = (mode === 'L') ? factor * 100 : (factor * 255) - 128;
        var hex = myColor.convertColor(currentLab, 'Lab2HEX');
        myColor.setColor(hex, 'hex');
    } else {
        var newColor = {};
        newColor[mode] = (e.clientX - startPoint.left) / currentTargetWidth * max[type][mode][1];
        myColor.setColor(newColor, type);
    }
}

CodePen

[PitPik]

That's because you convert to HEX and then set color. The color space of Lab is way bigger then RGB mode...
To set a color, you can just manipulate the color object and then set the color by passing an empty object or even null:

if (type === 'Lab') {
    var factor = (e.clientX - startPoint.left) / currentTargetWidth;
    factor = factor > 1 ? 1 : factor < 0 ? 0 : factor;
    myColor.colors.Lab[mode] = (mode === 'L') ? factor * 100 : (factor * 255) - 128;
    myColor.setColor(null, 'Lab');
}

[Horray]

Thank you very much! It finally works!!

[PitPik]

Hi @Horray,
I just updated colorPicker with a demo on how to realize Lab sliders.
Just pull the newest version, remove the comments of the sliders in the index.html and you can use them. Be aware that I changed all the id="rgbr" like DIVs...

[Horray]

Thank you very much! You're a great help!