<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

<link rel="stylesheet" href="lucency-slider/lucency-slider.css">
<script type="module" src="lucency-slider/lucency-slider.js"></script>
<lucency-slider style="color: rebeccapurple;"></lucency-slider>

HTML Attributes

<lucency-slider value="100" min="0" max="100" step="1"></lucency-slider>

| 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

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

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

<lucency-slicer class="slider1"></lucency-slider>

<style>
  .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;
      }
    }
  }
</style>

License

WTFPL

Sibling Packages

• reinvented-color-wheel: HSV color wheel
• lch-color-wheel: L*C*h color wheel