Color of opacity Slider should not be Black everytime
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 4.5k
- Forks
- 292
- PR merge metrics
- No merged PRs in 30d
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Pickr.create demo and the opacity slider elements exposed through _root.opacity, using the reported reproduction and supplied opacityUpdater example as context. Done means changing the selected color updates the opacity slider and picker background to that color instead of black across the reported bundles and themes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100