simonwep
Color of opacity Slider should not be Black everytime
What is the current behavior?
The color of the Opacity Slider Should not be black every time. when I change the color, the color of the opacity slider should update to that color but the color is black every time.
Please provide the steps to reproduce and create a JSFiddle.
Just Open picker in the demo that you provided
What is the expected behavior?
after changing the color, the color of the opacity slider should change to that color.
something like this:
I saw the code and definitely it's not a bug and hardcoded to use black color every time but regardless of this, it is more like a bug than a feature request.
btw I implemented that for pickers in my projects so I share that (maybe it helps someone else). something like this:
const pickr = Pickr.create({
// Options
});
Pickr.prototype.opacityUpdater = () => {
const opacityPtrn = `url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>')`;
const colorRGBA = this._color.toRGBA().toString(0);
const [r, g, b] = colorRGBA.match(/[\d\.]+/g);
const rgb = `rgb(${r}, ${g}, ${b})`;
this._root.opacity.slider.style.backgroundImage = `linear-gradient(to right, #0000, ${rgb}),${opacityPtrn}`;
this._root.opacity.picker.style.backgroundColor = colorRGBA;
};
pickr.on("change", (color, source, instance) => {
instance.opacityUpdater();
});
Demo:
Your environment:
Version (see Pickr.version): 1.8.2
Used bundle (es5 or normal one): All
Used theme (default is classic): All
Browser-version: Latest Browsers to date
Operating-system: macOS
Very nice to see this! Great job :) Unfortunately this project will be deprecated starting 2022... Anyway, I'll mark this as a feature-request!
