diff --git a/src/js/ConfigMenu.js b/src/js/ConfigMenu.js
index 210ab7e..88502f6 100644
--- a/src/js/ConfigMenu.js
+++ b/src/js/ConfigMenu.js
@@ -204,7 +204,14 @@ export default class ConfigMenu {
             if (options.data.max != null && val > options.data.max) this.set(options.key, options.data.max);
 
             const input = /* html */ `
-                <input type="number" id="dribbblish-config-input-${options.key}" value="${this.get(options.key)}">
+                <input
+                    type="number"
+                    id="dribbblish-config-input-${options.key}"
+                    ${options.data.min != null ? `min="${options.data.min}"` : ""}
+                    ${options.data.max != null ? `max="${options.data.max}"` : ""}
+                    step="${options.data.step ?? 1}"
+                    value="${this.get(options.key)}"
+                >
             `;
             this.addInputHTML({ ...options, input });
 
diff --git a/src/js/main.js b/src/js/main.js
index 006be1b..7961f87 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -43,32 +43,26 @@ DribbblishShared.config.register({
 
 DribbblishShared.config.register({
     area: "Sidebar",
-    type: "slider",
+    type: "number",
     key: "sidebarGapLeft",
     name: "Left Sidebar Gap Size",
     description: "Set gap size between sidebar icons (in pixels).",
     defaultValue: 5,
     data: {
-        min: 0,
-        max: 100,
-        step: 1,
-        suffix: "px"
+        min: 0
     },
     onChange: (val) => $("html").css("--sidebar-gap-left", `${val}px`)
 });
 
 DribbblishShared.config.register({
     area: "Sidebar",
-    type: "slider",
+    type: "number",
     key: "sidebarGapRight",
     name: "Right Sidebar Gap Size",
     description: "Set gap size between sidebar icons (in pixels).",
     defaultValue: 32,
     data: {
-        min: 0,
-        max: 100,
-        step: 1,
-        suffix: "px"
+        min: 0
     },
     onChange: (val) => $("html").css("--sidebar-gap-right", `${val}px`)
 });