How to Use Multiple Coloris Configurations (With and Without Alpha) on the Same Page?

[prioritario1971]

Hi everyone,
In my source code I have these two inputs:

<input id="background-color-hex" name="background-color-hex" class="colorsnoalpha" type="text">
<input id="background-color-hexA" name="background-color-hexA" class="colorswithalpha" type="text">

and I would like the color picker to generate only RGB HEX values without alpha in the first case, and with alpha in the second.

So, I tried using these two configurations:

Coloris({
    theme: 'polaroid',
    el: '.colorsnoalpha',
    alpha: false,
    format: 'hex',
    onChange: (color, inputEl) => {
        console.log(color, inputEl);
    }
});

Coloris({
    theme: 'polaroid',
    el: '.colorswithalpha',
    alpha: true,
    format: 'hex',
    onChange: (color, inputEl) => {
        console.log(`The new color is ${color}`);
    }
});

However, having two Coloris() calls doesn’t work: there are no JavaScript errors, but the second call overrides the first one, so both inputs end up with the alpha selector (i.e., they both take alpha: true).

Therefore, how can I have multiple different Coloris configurations on the same page?
Thanks for your help.
_francesco

[mdbassit]

Hi Francesco, for future reference, if you need multiple color pickers with different configuration, you need to use virtual instances.

I hope this helps.