Add Lab Color Sliders not working

[Horray]

When I add Lab divs in the html in index.html (from the documentation page), the JavaScript should create the sliders and everything in the renderColorSliders function. But run it and try it out, the Lab color sliders don't move.

I think the problem is at line 118 (in the codePen bellow), or it's on line 102.

Here's a code sample of what I mean:

CodePen

[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!