Transparency is the degree to which a rendered color lets the background behind it show through. In a color picker, it deserves its own control when the object being colored may itself be transparent. section 11.1
A transparency slider represents the value visually and exposes it through component attributes:
- Fade the selected color from full opacity at 0% to complete transparency at 100%. section 3.6
- Use a checkered white-and-grey background to indicate the transparent portion. section 11.1
- Represent transparency by appending “00” to a hexadecimal color, producing the fully transparent endpoint. section 3.6
- Update the slider when its value or background-color attributes change, then allow dragging to modify the value. section 3.6
A reusable transparency slider
A custom slider can receive a blue background and an initial 70% position with <wcia-slider backgroundcolor="#0000ff" value="70"></wcia-slider>. Its gradient fades that color toward transparency, while mouse events update the value attribute as the thumb moves. section 3.6
Listing 3.24. Functions to set the background color and slider value
setColor(color) { #1
if (this.querySelector('.bg-overlay')) {
this.querySelector('.bg-overlay').style.background =
`linear-gradient(to right, ${color} 0%, ${color}00 100%)`;
}
}
refreshSlider(value) { #2
if (this.querySelector('.thumb')) {
this.querySelector('.thumb').style.left = (value/100 *
this.offsetWidth - this.querySelector('.thumb').offsetWidth/2)
+ 'px';
}
}
Inspect the functions that create the color-to-transparent gradient and position the slider thumb. section 3.6
