git.r.bdr.sh - rbdr/lissajous/blob - lib/factories/ui.js

   1 export function settingsContainer({id, label, level=2}) {
   2
   3   const container = document.createElement('div');
   4   container.id = id;
   5   container.innerHTML = `<h${level}>${label}</h${level}>`;
   6   return container;
   7 };
   8
   9 export function slider({min, max, step, get, set, label = '', className}) {
  10
  11   const sliderContainer = document.createElement('div');
  12   sliderContainer.classList.add('slider');
  13   sliderContainer.classList.add(className);
  14   const labelElement = document.createElement('label');
  15   labelElement.innerHTML = label;
  16   const slider = document.createElement('input');
  17   slider.type = 'range';
  18   slider.min = min;
  19   slider.max = max;
  20   slider.step = step;
  21   slider.value = get().toString();
  22
  23   slider.addEventListener('input', () => set(slider.value));
  24
  25   sliderContainer.appendChild(labelElement);
  26   sliderContainer.appendChild(slider);
  27   return sliderContainer;
  28 }