add value label for sliders

Author: autumn-mck

index.html

@@ -69,13 +69,10 @@ <h3 class="widget-text">A heading widget...</h3>
 					<template id="slider-widget-template">
 						<div class="widget slider-widget widget-with-input">
 							<label class="widget-text">A slider</label>
-							<input
-								type="range"
-								min="1"
-								max="100"
-								value="50"
-								class="widget-input widget-range-input"
-								id="widget-input-x" />
+							<div class="widget-value">
+								<span class="widget-value-text">0</span>
+								<input type="range" class="widget-input widget-range-input" id="widget-input-x" />
+							</div>
 						</div>
 					</template>
 

src/config.ts

@@ -90,8 +90,15 @@ export class ConfigClass {
 						element.default === "disabled"
 					);
 				} else if (type === "slider" || type === "number" || type === "value") {
+					const widgetValue = clone.querySelector(".widget-value-text") as HTMLElement | null;
 					if (element.value.default !== undefined) {
 						inputElement!.valueAsNumber = element.value.default;
+
+						const suffix = getElementSuffix(element);
+						if (widgetValue) {
+							widgetValue.innerText = element.value.default.toString() + suffix;
+							widgetValue.dataset.suffix = suffix;
+						}
 					}
 					if (element.value.range) {
 						inputElement!.min = element.value.range[0].toString();
@@ -101,15 +108,7 @@ export class ConfigClass {
 						inputElement!.step = element.value.step.toString();
 					}
 
-					let suffix = "";
-
-					if ("suffix" in element.value && element.value.suffix) {
-						suffix = element.value.suffix;
-					} else if (element.value.type === "percent") {
-						suffix = " (%)";
-					}
-
-					if (suffix && widgetText) widgetText.innerText += suffix;
+					inputElement!.addEventListener("input", updateDisplayedValue);
 				} else if (type === "image") {
 					const imageFile = await zip.file(element.file)?.async("blob");
 					if (imageFile) {
@@ -129,3 +128,32 @@ export class ConfigClass {
 		return htmlWidgets.filter((element) => element !== undefined);
 	}
 }
+
+function getElementSuffix(element: NumberWidget | SliderWidget) {
+	let suffix = "";
+
+	if ("suffix" in element.value && element.value.suffix) {
+		suffix = element.value.suffix;
+	} else if (element.value.type === "percent") {
+		suffix = "%";
+	}
+	return suffix;
+}
+
+function updateDisplayedValue(event: Event) {
+	const target = event.target as HTMLInputElement;
+	const valueElement = target.parentElement?.querySelector(
+		".widget-value-text"
+	) as HTMLElement | null;
+
+	let valueToDisplay: string | number = target.valueAsNumber;
+
+	if (Number.parseFloat(target.min) < 0 && valueToDisplay > 0) {
+		valueToDisplay = `+${valueToDisplay}`;
+	}
+
+	if (valueElement) {
+		const suffix = valueElement.dataset.suffix ?? "";
+		valueElement.innerText = valueToDisplay.toString() + suffix;
+	}
+}

style.css

@@ -153,6 +153,7 @@ a:visited {
 	display: flex;
 	justify-content: space-between;
 	justify-items: stretch;
+	align-items: center;
 
 	padding-left: 1em;
 	padding-right: 1em;
@@ -161,26 +162,22 @@ a:visited {
 
 	accent-color: #cba6f7;
 	background-color: var(--background-above);
-
-	p,
-	h1,
-	h2,
-	h3,
-	h4 {
-		min-width: 25%;
-	}
 }
 
-/* .widget + .widget {
-	margin-top: 0em;
-} */
-
-.config-screen>.widget-with-input:nth-of-type(odd) {
-  background-color: var(--background);
+.config-screen > .widget-with-input:nth-of-type(odd) {
+	background-color: var(--background);
 }
 
 .widget-input {
-	min-width: 25%;
+	width: 15vw;
+}
+
+.widget-value {
+	display: flex;
+	flex-direction: row;
+	gap: 1em;
+	align-items: center;
+	justify-content: flex-end;
 }
 
 .widget-number-input {