Skip to main content

HTML inputs

Coming soon.

Select​

<select class="js-select">
    <option value="VALUE_A" selected>Value A</option>
    <option value="VALUE_B">Value B</option>
</select>
new class {
  constructor() {
      ...

      this.container.querySelector('.js-select').addEventListener('input', () => this.canvas.updateLayers([1]));

      ...
  }
  templateInstructions() {
      const thisTemplate = this;
      
      this.canvas.addLayer().draw(function() {
          const IS_UP = thisTemplate.container.querySelector('.js-select').value == 'UP';

          ...
      });
      
  }
}

Slider​

<p class="small-p" >Lorem Ipsum</p>
<input class="js-select" type="range" min="0" max="100" value="50">
new class {
  constructor() {
      ...

      this.container.querySelector('.js-slider').addEventListener('input', () => this.canvas.updateLayers([1]));

      ...
  }
  templateInstructions() {
      const thisTemplate = this;
      
      this.canvas.addLayer().draw(function() {
          const SLIDER_VALUE = thisTemplate.container.querySelector('.js-slider').value;

          ...
      });
      
  }
}

Checkbox​

<div class="flex-column full-width" style="gap:6px">
    <label class="switch">
        <input type="checkbox" class="js-checkbox">
        <span class="slider round"></span>
    </label>
    <p class="small-p" style="margin-top: 2px;" >Lorem Ipsum</p>
</div>
new class {
  constructor() {
      ...

      this.container.querySelector('.js-checkbox').addEventListener('input', () => this.canvas.updateLayers([1]));

      ...
  }
  templateInstructions() {
      const thisTemplate = this;
      
      this.canvas.addLayer().draw(function() {
          const IS_CHECKED = thisTemplate.container.querySelector('.js-checkbox').checked;

          ...
      });
      
  }
}

Radio​