https://github.com/luncheon/lucency-slider
A tiny web component for inputting translucency/opacity.
https://github.com/luncheon/lucency-slider
color-picker opacity opacity-slider picker slider webcomponent webcomponents
Last synced: 14 days ago
JSON representation
A tiny web component for inputting translucency/opacity.
- Host: GitHub
- URL: https://github.com/luncheon/lucency-slider
- Owner: luncheon
- License: wtfpl
- Created: 2025-11-05T04:33:48.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-11-28T23:16:03.000Z (7 months ago)
- Last Synced: 2026-06-04T23:09:16.788Z (28 days ago)
- Topics: color-picker, opacity, opacity-slider, picker, slider, webcomponent, webcomponents
- Language: HTML
- Homepage: https://luncheon.github.io/lucency-slider/
- Size: 23.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# <lucency-slider>
A tiny web component for inputting translucency/opacity.
[
](https://luncheon.github.io/lucency-slider/)
- Demo: https://luncheon.github.io/lucency-slider/
- Playgroud: https://codepen.io/luncheon/pen/qEZbeMZ?layout=left
## Usage
```html
```
## HTML Attributes
```html
```
| Name | Type | Default | Description |
| -------- | ------------------------ | ------: | ------------------ |
| disabled | boolean (existence) | false | Immutability |
| max | number [0, 100] | 100 | Upper bound |
| min | number [0, 100] | 0 | Lower bound |
| name | string | | Form control name |
| step | number [0, 100] or `any` | 1 | Granularity |
| value | number [0, 100] | 100 | Opacity percentage |
| vertical | boolean (existence) | false | Orientation |
## DOM Element Properties
```js
const lucencySlider = document.createElement("lucency-slider");
lucencySlider.valueAsNumber = 100;
```
The attributes listed above can be used as properties with the same names.
| Name | Type | Description |
| -------- | ----------------- | ------------------ |
| disabled | boolean | Immutability |
| max | number | Upper bound |
| min | number | Lower bound |
| name | string | Form control name |
| step | number or `"any"` | Granularity |
| value | string | Opacity percentage |
| vertical | boolean | Orientation |
Additionally, `valueAsNumber` can be used in the same way as `HTMLInputElement`.
| Name | Type | Description |
| ------------- | ------ | ------------------------------ |
| valueAsNumber | number | Opacity percentage as a number |
## DOM Events
```js
const lucencySlider = document.createElement("lucency-slider");
lucencySlider.addEventListener("input", event => {
document.body.style.background = `rgb(from rebeccapurple r g b / ${event.target.valueAsNumber}%)`;
});
```
| Type | Description |
| ------ | ------------------------------------------------ |
| input | User modified the opacity |
| change | User modified the opacity and released the thumb |
## Styling
```html
.slider1 {
/* slider color */
color: rebeccapurple;
/* checker grid size is based on line-height (1/4 lh) */
line-height: 24px;
/* checker grid colors */
/* default: */
--checker-color-1: #ddd;
--checker-color-2: #fff;
&::part(thumb) {
/* where your skills come into play */
/* default: */
inline-size: 4px;
border-radius: 9px;
border: 1px solid #fff;
box-shadow: 0 0 0 1px #333;
}
&:hover:not(:active):not([disabled])::part(thumb) {
/* recommended to highlight */
/* default: */
border-color: #ddd;
}
&[disabled] {
/* recommended to lowlight */
/* default: */
&::part(thumb) {
box-shadow: 0 0 0 1px #888;
}
}
}
```
## License
[WTFPL](http://www.wtfpl.net)
## Sibling Packages
- [reinvented-color-wheel](https://github.com/luncheon/reinvented-color-wheel): HSV color wheel
- [lch-color-wheel](https://github.com/luncheon/lch-color-wheel): L\*C\*h color wheel