ctbk/dmx-interface
1
0
Fork 0
mirror of https://github.com/HendrikRauh/dmx-interface.git synced 2025-05-19 10:32:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixes "Slider für Helligkeit zeigt beim ersten Laden 50% ist aber bei 10%" #68

Browse source
This commit is contained in:
RaffaelW 2025-02-16 20:46:06 +01:00
parent bd199c6c80
commit 1ccf214ddb
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
data/index.html
View file

@ -7,11 +7,11 @@
<link rel="stylesheet" href="/style.css" /> <link rel="stylesheet" href="/style.css" />
<script type="module" src="/input-visibility.js" defer></script> <script type="module" src="/input-visibility.js" defer></script>
<script type="module" src="/loading-screen.js" defer></script> <script type="module" src="/loading-screen.js" defer></script>
<script type="module" src="/range-input.js" defer></script>
<script type="module" src="/load-data.js" defer></script> <script type="module" src="/load-data.js" defer></script>
<script type="module" src="/networks.js" defer></script> <script type="module" src="/networks.js" defer></script>
<script type="module" src="/submit.js" defer></script> <script type="module" src="/submit.js" defer></script>
<script type="module" src="/reset.js" defer></script> <script type="module" src="/reset.js" defer></script>
<script type="module" src="/range-input.js" defer></script>
</head> </head>
<body> <body>
<main> <main>

16
data/range-input.js
View file

@ -1,14 +1,20 @@
document.querySelector("form").addEventListener("input", (event) => { const form = document.querySelector("form");
form.addEventListener("input", (event) => {
if (event.target.classList.contains("range")) { if (event.target.classList.contains("range")) {
updateValue(event.target); updateValue(event.target);
} }
}); });
form.addEventListener("change", () => {
console.log("received change event");
document.querySelectorAll("input[type='range']").forEach((input) => {
updateValue(input);
});
});
function updateValue(slider) { function updateValue(slider) {
console.log("update slide value");
const percentage = Math.round((slider.value / slider.max) * 100); const percentage = Math.round((slider.value / slider.max) * 100);
slider.nextElementSibling.innerText = `${percentage}%`; slider.nextElementSibling.innerText = `${percentage}%`;
} }
document.querySelectorAll("input[type='range'].range").forEach((element) => {
updateValue(element);
});