jaames / jaames/iro.js

RGB and Alpha sliders not keeping alpha value on interaction

Open
#227 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.5k
Forks
91
PR merge metrics
No merged PRs in 30d

Description

Version: 5.5.2

Description:
----------------
On an iro color picker with a custom layout containing red / green / blue and alpha sliders, on sliding the alpha slider first, then sliding any of the red/green/blue sliders resets the alpha value to 1.
This behaviour only occurs on rgb/kelvin sliders in combination with alpha slider.

Minimal reproduction:
-----------------------------
Consider the following pen: [RGBA Slider Example](https://codepen.io/lenadax/pen/LYemxQV)
Create a color Picker with the following properties:

```js
var colorPicker = new iro.ColorPicker(".yourElement", {
color: "rgb(255, 0, 0)",
layout: [
{component: iro.ui.Slider, options: {sliderType: 'red'}},
{component: iro.ui.Slider, options: {sliderType: 'alpha'}}
]});
```
Next, slide the alpha slider to a value below 1.
Then slide the red slider to any value.

Output: on sliding the red slider, alpha value gets reset to 1.
rgbaString also shows an alpha value of 1.
In the pen, we see that alpha value is preserved sliding the hue slider, but not while sliding the red slider.

I don't know if this is in fact intended behaviour, but for functionality I would prefer the active Color keep its alpha value in this case!

Contributor guide

Open the contributing guide

Research direction

Start with the provided RGBA Slider Example and the iro.ColorPicker configuration using iro.ui.Slider for red and alpha. Reproduce the interaction by lowering alpha before moving the red slider, then trace how RGB/kelvin slider updates affect the active color. Done means the alpha value remains below 1 and rgbaString preserves it after RGB slider interaction.

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
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.