<lucency-slider>

A tiny web component for inputting translucency/opacity.

- 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



``

License

WTFPL

Sibling Packages

- reinvented-color-wheel: HSV color wheel
- lch-color-wheel: L\C\h color wheel