Custom CSS & HTML Toggle Switch Help

[GatsbyFitz]

Hello,
I was wondering whether anybody had any examples of how to use CDD & HTML to create a custom input, such as a toggle switch:

That when switched on I can use to change the color of a plot.

Something like this:

 <label class="switch">
        <input type="checkbox" id="toggleSwitch">
          <span class="slider round"></span>
  </label>

```js

document.getElementById('toggleSwitch').addEventListener('change', function() {
mute.value = this.check;
          });

<div class= "card" id="CustomerNumbers">
${resize((width) => Plot.plot({
  width,
  subtitle: "By Region, By Service",
  marginLeft: 50,
  color: mute ? { legend: true, scheme: "Set1" } : { legend: true },
  x: { type: "time"},
  y: { grid: true, type: "linear"},
  symbol: { legend: true },

Unfortunately I am struggling, any ideas or examples?
Many thanks!

[Fil]

Hello,

you were almost there: what was missing was to send a custom input event after the element's value changes, to inform the reactivity downstream.

In more details: https://observablehq.observablehq.cloud/pangea/support/toggle-switch

[GatsbyFitz]

Thank you Fil! Lifesaver as per usual...

[GatsbyFitz]

Another option using React:

const clicked = Mutable(true);

function toggleClicked() {
  clicked.value = !clicked.value;
}

function Counter({ clicked }) {
  return (
    <label class="switch">
      <input type="checkbox" onChange={toggleClicked} checked={clicked.value} />
      <span class="slider round"></span>
    </label>
  );
}

display(<Counter clicked={clicked} />);