]> git.r.bdr.sh - rbdr/lissajous/blob - lib/factories/ui.js
27ff6eb96b76acecc26b65f951bf0043ea4d1091
[rbdr/lissajous] / 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 }