examples

color picker

• Create an RGB color picker.

html

<div class="display"></div>
<div data-r="controls"></div>
<div data-r="output copy"></div>
<button data-s="copy" data-r="restoreText">Copy</button>

<script data-template="slider" type="text/html">
  <label>
    <input data-s="updateColor" type="range" data-color="__COLOR__" min="0" max="255" step="1" value="__VALUE__" />
    __COLOR__
  </label>
</script>

javascript

export const b = { init: "controls" };

const colors = { red: 90, green: 40, blue: 150 };

export function controls(_, __, el) {
  el.replaceChildren(
    ...Object.keys(colors).map((color) => {
      b.setCSS(`--${color}`, colors[color]);
      const subs = {
        __COLOR__: color,
        __VALUE__: `${colors[color]}`,
      };
      return b.render("slider", subs);
    }),
  );
  b.trigger("output");
}

export function copy(_, sender, el) {
  b.quickCopy(el, sender);
}

export function output(_, __, el) {
  el.innerHTML = `rgb(${colors.red} ${colors.green} ${colors.blue})`;
}

export function updateColor(ev, __, ___) {
  colors[ev.target.prop("color")] = ev.target.valueAsInt();
  b.setCSS(`--${ev.target.prop("color")}`, ev.target.valueAsInt());
  b.trigger("output");
}

• tktktk

styles

.display {
  background-color: rgb(var(--red) var(--green) var(--blue));
  height: 100px;
  width: 200px;
}