From e87aa1873f6a01148898b41dc3498ca6f82410d8 Mon Sep 17 00:00:00 2001
From: missionfloyd <missionfloyd@users.noreply.github.com>
Date: Wed, 12 Apr 2023 19:36:35 -0600
Subject: [PATCH 1/3] Add slider setting type

---
 web/scripts/ui.js | 24 ++++++++++++++++++++++++
 web/style.css     |  8 ++++++++
 2 files changed, 32 insertions(+)

diff --git a/web/scripts/ui.js b/web/scripts/ui.js
index 09861c44..1c7fdc8a 100644
--- a/web/scripts/ui.js
+++ b/web/scripts/ui.js
@@ -270,6 +270,30 @@ class ComfySettingsDialog extends ComfyDialog {
 								]),
 							]);
 							break;
+                        case "slider":
+							element = $el("div", [
+								$el("label", { textContent: name }, [
+									$el("input", {
+										type: "range",
+										value,
+										oninput: (e) => {
+											setter(e.target.value);
+                                            e.target.nextElementSibling.value = e.target.value;
+										},
+										...attrs
+									}),
+                                    $el("input", {
+										type: "number",
+										value,
+										oninput: (e) => {
+											setter(e.target.value);
+                                            e.target.previousElementSibling.value = e.target.value;
+										},
+										...attrs
+									}),
+								]),
+							]);
+							break;
 						default:
 							console.warn("Unsupported setting type, defaulting to text");
 							element = $el("div", [
diff --git a/web/style.css b/web/style.css
index 34e31726..e3b44576 100644
--- a/web/style.css
+++ b/web/style.css
@@ -217,6 +217,14 @@ button.comfy-queue-btn {
 	z-index: 99;
 }
 
+.comfy-modal.comfy-settings input[type="range"] {
+	vertical-align: middle;
+}
+
+.comfy-modal.comfy-settings input[type="range"] + input[type="number"] {
+	width: 3.5em;
+}
+
 .comfy-modal input,
 .comfy-modal select {
 	color: var(--input-text);

From 8810e1b4b9e2c14860800a2bdc97d50d1aa2f904 Mon Sep 17 00:00:00 2001
From: missionfloyd <missionfloyd@users.noreply.github.com>
Date: Wed, 12 Apr 2023 21:15:21 -0600
Subject: [PATCH 2/3] Fix indentation

---
 web/scripts/ui.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/scripts/ui.js b/web/scripts/ui.js
index 1c7fdc8a..6cbc9383 100644
--- a/web/scripts/ui.js
+++ b/web/scripts/ui.js
@@ -270,7 +270,7 @@ class ComfySettingsDialog extends ComfyDialog {
 								]),
 							]);
 							break;
-                        case "slider":
+						case "slider":
 							element = $el("div", [
 								$el("label", { textContent: name }, [
 									$el("input", {
@@ -278,16 +278,16 @@ class ComfySettingsDialog extends ComfyDialog {
 										value,
 										oninput: (e) => {
 											setter(e.target.value);
-                                            e.target.nextElementSibling.value = e.target.value;
+											e.target.nextElementSibling.value = e.target.value;
 										},
 										...attrs
 									}),
-                                    $el("input", {
+									$el("input", {
 										type: "number",
 										value,
 										oninput: (e) => {
 											setter(e.target.value);
-                                            e.target.previousElementSibling.value = e.target.value;
+											e.target.previousElementSibling.value = e.target.value;
 										},
 										...attrs
 									}),

From 307ef543bf66e5ffd718b3a0b148c72287b65a89 Mon Sep 17 00:00:00 2001
From: missionfloyd <missionfloyd@users.noreply.github.com>
Date: Thu, 13 Apr 2023 10:04:06 -0600
Subject: [PATCH 3/3] Change grid size to slider

---
 web/extensions/core/snapToGrid.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/extensions/core/snapToGrid.js b/web/extensions/core/snapToGrid.js
index 20b245e1..cb5fc154 100644
--- a/web/extensions/core/snapToGrid.js
+++ b/web/extensions/core/snapToGrid.js
@@ -9,7 +9,7 @@ app.registerExtension({
 		app.ui.settings.addSetting({
 			id: "Comfy.SnapToGrid.GridSize",
 			name: "Grid Size",
-			type: "number",
+			type: "slider",
 			attrs: {
 				min: 1,
 				max: 500,