diff options
Diffstat (limited to 'controller_webpage')
| -rw-r--r-- | controller_webpage/index.html | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/controller_webpage/index.html b/controller_webpage/index.html index 9754759..7af0439 100644 --- a/controller_webpage/index.html +++ b/controller_webpage/index.html @@ -116,6 +116,15 @@ width: 100%; } + .fraction-field { + flex-direction: column; + align-items: stretch; + } + + input[type="range"] { + width: 100%; + } + input[type="number"], input[type="text"] { flex: 1; @@ -254,6 +263,15 @@ field.appendChild(colorInput); field.appendChild(textInput); } else if (value.type === "fraction" || value.type === "ratio") { + field.classList.add("fraction-field"); + const slider = document.createElement("input"); + slider.type = "range"; + slider.step = "0.01"; + slider.min = "0"; + slider.max = value.type === "fraction" ? "1" : "2.5"; + slider.value = fmt(value.value); + field.appendChild(slider); + const input = document.createElement("input"); input.type = "number"; input.step = "0.01"; @@ -265,6 +283,16 @@ input.value = fmt(value.value); field.appendChild(input); + slider.oninput = () => { + input.value = fmt(slider.value); + }; + slider.onchange = () => { + sendRequest(attr, "set", fmt(slider.value)); + }; + input.oninput = () => { + slider.value = input.value; + }; + const actions = document.createElement("div"); actions.className = "actions"; @@ -355,6 +383,9 @@ ? fmt(value.value) : value.value; el.value = newVal; + if ((value.type === "fraction" || value.type === "ratio") && el.previousElementSibling && el.previousElementSibling.type === "range") { + el.previousElementSibling.value = newVal; + } if (value.type === "color" && el.nextElementSibling) { el.nextElementSibling.value = newVal; } |