A tiny web component for inputting translucency/opacity.
npm install lucency-sliderA tiny web component for inputting translucency/opacity.
- Demo: https://luncheon.github.io/lucency-slider/
- Playgroud: https://codepen.io/luncheon/pen/qEZbeMZ?layout=left
``html`
`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 |
`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 |
`jsrgb(from rebeccapurple r g b / ${event.target.valueAsNumber}%)
const lucencySlider = document.createElement("lucency-slider");
lucencySlider.addEventListener("input", event => {
document.body.style.background = ;`
});
| Type | Description |
| ------ | ------------------------------------------------ |
| input | User modified the opacity |
| change | User modified the opacity and released the thumb |
`html
``
- reinvented-color-wheel: HSV color wheel
- lch-color-wheel: L\C\h color wheel