simonwep / simonwep/pickr

Color of opacity Slider should not be Black everytime

Open
#310 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

improvement
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.
Screen Shot 1400-09-12 at 15 04 34

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:
Screen Shot 1400-09-12 at 15 01 43

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.