74 lines
1.7 KiB
JavaScript
74 lines
1.7 KiB
JavaScript
const controlMain = document.getElementById("control-main");
|
|
|
|
function remap(low1, high1, low2, high2, value)
|
|
{
|
|
return low2 + (value - low1) * (high2 - low2) / (high1 - low1);
|
|
}
|
|
|
|
class Slider {
|
|
constructor(label, low, high, max = 1024)
|
|
{
|
|
const labelE = document.createElement("span");
|
|
labelE.className = "label";
|
|
labelE.innerHTML = label;
|
|
|
|
const valueE = document.createElement("div");
|
|
valueE.className = "value";
|
|
|
|
const inputE = document.createElement("input");
|
|
inputE.className = "range";
|
|
inputE.min = 0;
|
|
inputE.max = max;
|
|
inputE.type = "range";
|
|
const spanE = document.createElement("span");
|
|
spanE.className = "range-span code";
|
|
|
|
valueE.appendChild(inputE);
|
|
valueE.appendChild(spanE);
|
|
|
|
controlMain.appendChild(labelE);
|
|
controlMain.appendChild(valueE);
|
|
|
|
this.label = label;
|
|
this.input = inputE;
|
|
this.span = spanE;
|
|
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, this.input.value);
|
|
if (rawValue !== this.lastValue) {
|
|
this.lastValue = rawValue;
|
|
localStorage.setItem(this.label, rawValue);
|
|
}
|
|
if (this.high > 10) {
|
|
this.span.innerHTML = value.toFixed(2);
|
|
} else {
|
|
this.span.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 };
|