diff --git a/data/index.html b/data/index.html
index 96ef84c..b9d3877 100644
--- a/data/index.html
+++ b/data/index.html
@@ -7,11 +7,11 @@
+
-
diff --git a/data/range-input.js b/data/range-input.js
index 4b31c04..4bc9c62 100644
--- a/data/range-input.js
+++ b/data/range-input.js
@@ -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")) {
updateValue(event.target);
}
});
+form.addEventListener("change", () => {
+ console.log("received change event");
+ document.querySelectorAll("input[type='range']").forEach((input) => {
+ updateValue(input);
+ });
+});
+
function updateValue(slider) {
+ console.log("update slide value");
const percentage = Math.round((slider.value / slider.max) * 100);
slider.nextElementSibling.innerText = `${percentage}%`;
}
-
-document.querySelectorAll("input[type='range'].range").forEach((element) => {
- updateValue(element);
-});