diff --git a/src/form.ts b/src/form.ts
index 4fe4548..7b788fa 100644
--- a/src/form.ts
+++ b/src/form.ts
@@ -147,6 +147,7 @@ export async function addFormElement(
 
 	await addVariableSliders(font, parentEl);
 	await addNamedInstances(font, parentEl);
+	// await activateSliders(font, parentEl);
 
 	// Set up font name and instance in title
 	await setFontNameAndInstance(font, parentEl);
@@ -270,9 +271,9 @@ async function addNamedInstances(font: Font, el: HTMLElement) {
 
 	// Create instances dropdown
 	const dropdown = document.createElement("select");
+	dropdown.onchange = applyNamedInstance;
 	dropdown.classList.add("select-instance");
 	dropdown.name = "select-instance";
-	dropdown.onchange = applyNamedInstance;
 
 	// Add "turn off font-variation-settings" option
 	const option = document.createElement("option");
@@ -370,6 +371,30 @@ async function addVariableSliders(font: Font, el: HTMLElement) {
 	}
 }
 
+async function setStyleFromSliders(
+	font: Font,
+	axis: Axis,
+	parent: HTMLElement,
+	input: HTMLInputElement,
+	value: HTMLSpanElement
+) {
+	input.onchange = async e => {
+		let fontId = parent.dataset.fontid;
+		let font = await getFont(fontId);
+		let newValue = (e.target as HTMLInputElement).value;
+		value.innerText = newValue;
+		// Store the value back in the font object
+		font.location[axis.id] = parseFloat(newValue);
+		/// If we're on an instance, update .select-instance
+		const dropdown =
+			parent.querySelector<HTMLSelectElement>(".select-instance");
+		if (dropdown) {
+			dropdown.value = (await font.activeInstance()) || "--axes--";
+		}
+		await updateFont(font);
+	};
+}
+
 function addSlider(font: Font, axis: Axis, parent: HTMLElement) {
 	const variableSliders = parent.querySelector(".variable-sliders");
 	const template: HTMLTemplateElement =
@@ -397,21 +422,22 @@ function addSlider(font: Font, axis: Axis, parent: HTMLElement) {
 		font.location[axis.id] = axis.default;
 	}
 
-	input.onchange = async e => {
-		let fontId = parent.dataset.fontid;
-		let font = await getFont(fontId);
-		let newValue = (e.target as HTMLInputElement).value;
-		value.innerText = newValue;
-		// Store the value back in the font object
-		font.location[axis.id] = parseFloat(newValue);
-		/// If we're on an instance, update .select-instance
-		const dropdown =
-			parent.querySelector<HTMLSelectElement>(".select-instance");
-		if (dropdown) {
-			dropdown.value = (await font.activeInstance()) || "--axes--";
-		}
-		await updateFont(font);
-	};
+	// input.onclick = e => {
+	// 	activateSliders(font, parent);
+	// };
+
+	let sliders = parent.querySelectorAll<HTMLElement>(
+		".variable-slider input"
+	);
+
+	variableSliders.addEventListener("click", async e => {
+		variableSliders.classList.remove("mute");
+		sliders.forEach(slider => {
+			(slider as HTMLInputElement).disabled = false;
+		});
+	});
+
+	setStyleFromSliders(font, axis, parent, input, value);
 
 	variableSliders.append(el);
 }
@@ -428,6 +454,62 @@ function unhighlight(e: Event) {
 	e.stopPropagation();
 }
 
+// async function activateSliders(font: Font, parent: HTMLElement) {
+// 	let slider_container = parent.querySelector<HTMLElement>(
+// 		".variable-sliders-container"
+// 	);
+// 	let sliders = parent.querySelectorAll<HTMLElement>(
+// 		".variable-slider input"
+// 	);
+// 	let styleMenu = parent.querySelector<HTMLSelectElement>(".select-instance");
+
+// 	// slider_container.classList.remove("mute");
+// 	// watch for click on variableSliders, and remove class "mute"
+// 	slider_container.onclick = async e => {
+// 		slider_container.classList.remove("mute");
+// 		sliders.forEach(slider => {
+// 			(slider as HTMLInputElement).disabled = false;
+// 		});
+// 	};
+// 	// 	// styleMenu.value = (await font.activeInstance()) || "--axes--";
+// 	// 	// applyNamedInstance(e);
+// 	// 	// await updateFont(font);
+// 	// 	sliders.forEach(slider => {
+// 	// 		(slider as HTMLInputElement).disabled = false;
+// 	// 	});
+// 	// };
+// 	// sliders.forEach(slider => {
+// 	// 	slider.onclick = e => {
+// 	// 		slider_container.classList.remove("mute");
+// 	// 		sliders.forEach(slider => {
+// 	// 			(slider as HTMLInputElement).disabled = false;
+// 	// 		});
+// 	// 	};
+// 	// });
+// 	sliders.forEach(slider => {
+// 		slider.onclick = e => {
+// 			slider_container.classList.remove("mute");
+// 			sliders.forEach(slider => {
+// 				(slider as HTMLInputElement).disabled = false;
+// 			});
+// 		};
+// 		// When slider is moved, update the font object and save to storage
+// 		slider.oninput = async e => {
+// 			// slider_container.classList.remove("mute");
+// 			let fontId = parent.dataset.fontid;
+// 			let font = await getFont(fontId);
+// 			let input = e.target as HTMLInputElement;
+// 			let value = (e.target as HTMLInputElement).value;
+// 			let axisId = (e.target as HTMLInputElement).name.replace(
+// 				"var-",
+// 				""
+// 			);
+
+// 			setStyleFromSliders(font, axisId, parent, input, value);
+// 		};
+// 	});
+// }
+
 async function setStorageKeyIfNotFound(key: string, defaultValue: Font[]) {
 	try {
 		const result = await chrome.storage.local.get(key);