Make 3D

[rbdr/lissajous] / lib / factories / ui.js

export function settingsContainer({id, label, level=2}) {

  const container = document.createElement('div');
  container.id = id;
  container.innerHTML = `<h${level}>${label}</h${level}>`;
  return container;
};

export function slider({min, max, step, get, set, label = '', className}) {

  const sliderContainer = document.createElement('div');
  sliderContainer.classList.add('slider');
  sliderContainer.classList.add(className);
  const labelElement = document.createElement('label');
  labelElement.innerHTML = label;
  const slider = document.createElement('input');
  slider.type = 'range';
  slider.min = min;
  slider.max = max;
  slider.step = step;
  slider.value = get().toString();

  slider.addEventListener('input', () => set(slider.value));

  sliderContainer.appendChild(labelElement);
  sliderContainer.appendChild(slider);
  return sliderContainer;
}