77 lines
1.8 KiB
JavaScript
77 lines
1.8 KiB
JavaScript
const controlGrid = document.getElementById("control-parent");
|
|
|
|
function remap(low1, high1, low2, high2, value)
|
|
{
|
|
return low2 + (value - low1) * (high2 - low2) / (high1 - low1);
|
|
}
|
|
|
|
class Slider {
|
|
constructor(label, low, high, max = 1024)
|
|
{
|
|
const parent = controlGrid;
|
|
|
|
const labelE = document.createElement("label");
|
|
labelE.innerHTML = label;
|
|
|
|
const inputE = document.createElement("input");
|
|
inputE.min = 0;
|
|
inputE.max = max;
|
|
inputE.type = "range";
|
|
const rangeValueE = document.createElement("range-value");
|
|
const codeE = document.createElement("code");
|
|
rangeValueE.appendChild(codeE);
|
|
|
|
const rowE = document.createElement("row");
|
|
|
|
const sepE = document.createElement("row-separator");
|
|
|
|
rowE.appendChild(labelE);
|
|
rowE.appendChild(inputE);
|
|
rowE.appendChild(rangeValueE);
|
|
|
|
parent.appendChild(rowE);
|
|
parent.appendChild(sepE);
|
|
|
|
this.label = label;
|
|
this.input = inputE;
|
|
this.code = codeE;
|
|
this.low = low;
|
|
this.high = high;
|
|
this.lastValue = undefined;
|
|
|
|
const storageValue = localStorage.getItem(this.label);
|
|
if (storageValue !== null) {
|
|
this.input.value = storageValue;
|
|
}
|
|
|
|
this.update();
|
|
}
|
|
|
|
update()
|
|
{
|
|
const rawValue = parseInt(this.input.value);
|
|
const value = remap(this.input.min, this.input.max, this.low, this.high, rawValue);
|
|
if (rawValue !== this.lastValue) {
|
|
this.lastValue = rawValue;
|
|
localStorage.setItem(this.label, rawValue);
|
|
}
|
|
if (this.high > 10) {
|
|
this.code.innerHTML = value.toFixed(2);
|
|
} else {
|
|
this.code.innerHTML = value.toFixed(4);
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
|
|
function updateSliders(sliders)
|
|
{
|
|
const values = {};
|
|
for (let [key, value] of Object.entries(sliders)) {
|
|
values[key] = value.update();
|
|
}
|
|
return values;
|
|
}
|
|
|
|
export { Slider, updateSliders };
|