Refactors the slider to use setDesc instead of a tooltip

Author: gsarig

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "varinote",
 	"name": "Varinote",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"minAppVersion": "1.7.7",
 	"description": "Add variables in templates and set their values on-the-fly during the note creation.",
 	"author": "Giorgos Sarigiannidis",

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "varinote",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"description": "Add variables in Templates and set their values on-the-fly during the Note creation.",
 	"main": "dist/main.js",
 	"scripts": {

package.json

@@ -31,30 +31,19 @@ export function createSliderField(
 	}
 
 	const sliderContainer = document.createElement('div');
-	sliderContainer.style.position = 'relative';
 	contentEl.appendChild(sliderContainer);
 
-	let currentTooltip: HTMLElement | null = null;
-
-	new Setting(sliderContainer)
+	const setting = new Setting(sliderContainer)
 		.setName(property.label)
+		.setDesc(defaultValue.toString())
+		.setClass('setting-item-slider')
 		.addSlider(slider => {
-			const inputEl = sliderContainer.querySelector('input[type="range"]');
-			if (!inputEl) return;
-
-			currentTooltip = document.createElement('div');
-			currentTooltip.className = 'slider-tooltip';
-			currentTooltip.textContent = defaultValue.toString();
-			sliderContainer.appendChild(currentTooltip);
-
 			return slider
 				.setLimits(min, max, step)
 				.setValue(defaultValue)
 				.onChange((value: number) => {
 					formValues[key] = value;
-					if (currentTooltip) {
-						currentTooltip.textContent = value.toString();
-					}
+					setting.setDesc(value.toString());
 				});
 		});
 }

src/fields/sliderField.ts

@@ -14,21 +14,19 @@
 		}
 	}
 
-	.setting-item {
-		&:has(.slider) {
-			max-width: calc(100% - 2em);
+	& .setting-item-slider {
+		& .setting-item-name {
+			display: inline;
 		}
-	}
 
-	& .slider-tooltip {
-		position: absolute;
-		display: block;
-		padding-right: 0;
-		left: unset;
-		right: 0.2em;
-		font-size: 0.9em;
-		top: calc(50% - 1.1em);
-		pointer-events: none;
+		& .setting-item-description {
+			display: inline-block;
+			font-weight: bold;
+			font-size: var(--font-ui-medium);
+			&::before {
+				content: ": ";
+				font-weight: normal;
+			}
+		}
 	}
-
 }

styles.css

@@ -10,5 +10,6 @@
 	"1.0.8": "1.7.7",
 	"1.0.9": "1.7.7",
 	"1.0.10": "1.7.7",
-	"1.1.0": "1.7.7"
+	"1.1.0": "1.7.7",
+	"1.1.1": "1.7.7"
 }