diff --git a/javascript/ui.js b/javascript/ui.js
index ecc35a55..9fde63da 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -808,34 +808,53 @@ onUiUpdate(function(){
 			add2quickSettings(tid, sid, e.target.checked);
 		})
 	})
-	
-	/*
-	gradioApp().querySelectorAll("#quicksettings_overflow_container input[type='range']").forEach(function (elem,i){
-		
-		let clone_range = elem.cloneNode(true);
-		clone_range.id = elem.id+"_clone";
-		let parent = elem.parentElement;
-		parent.append(clone_range);
-		elem.style.display = "none";	
-		
-		clone_range.addEventListener('change', function (e) {					
-			let range = e.target;
-			let rid = range.id.split("_clone")[0];
-			let n_range = range.parentElement.querySelector("#"+rid);
-			let n_num = range.parentElement.querySelector("input[type=number]");
-			n_range.value = e.target.value;
-			n_num.value = e.target.value;
-			//const iEvent = new Event("input");		
-			//Object.defineProperty(iEvent, "target", {value: n_range})		
-			//n_range.dispatchEvent(iEvent);		
-		})
-	})
-	*/
-	
-	
 	//addModelCheckpoint();
 	
-	//selectCheckpoint
+	// performant dispatch for gradio's range slider and input number fields
+	function ui_performant_gradio_input_components(sel){
+		let selectors = sel.split(",");
+		selectors.push("#quicksettings_overflow_container");
+		selectors = selectors.filter(e => e);
+		for (let i = 0; i < selectors.length; i++) {
+			selectors[i] = selectors[i]+" input[type='number']";
+		}
+		let input_selectors = selectors.join(",");
+		
+		gradioApp().querySelectorAll(input_selectors).forEach(function (elem){
+			let parent = elem.parentElement;
+			let label = parent.querySelector("label");
+			
+			let clone_num = elem.cloneNode(true);			
+			parent.append(clone_num);
+			elem.style.display = "none";
+			
+			clone_num.addEventListener('change', function (e) {			
+				elem.value = clone_num.value;
+				updateInput(elem);
+			})			
+			
+			if(label){				
+				let comp_range = parent.parentElement.parentElement.querySelector("input[type='range']");
+				let clone_range = comp_range.cloneNode(true);
+				clone_range.id = comp_range.id+"_clone";		
+				comp_range.parentElement.append(clone_range);
+				comp_range.style.display = "none";
+
+				clone_range.addEventListener('input', function (e) {								
+					clone_num.value = e.target.value;	
+				})
+				clone_range.addEventListener('change', function (e) {
+					elem.value = clone_range.value;
+					updateInput(elem);	
+				})				
+				clone_num.addEventListener('input', function (e) {								
+					clone_range.value = e.target.value;	
+				})								
+			}
+					
+		})
+	}	
+	ui_performant_gradio_input_components(opts.ui_performant_gradio_input_components);
 	
 	
 	// draggable reordable quicksettings
diff --git a/modules/shared.py b/modules/shared.py
index b131faf5..8e36b6bb 100644
--- a/modules/shared.py
+++ b/modules/shared.py
@@ -414,6 +414,7 @@ options_templates.update(options_section(('sd', "Stable Diffusion"), {
     "CLIP_stop_at_last_layers": OptionInfo(1, "Clip skip", gr.Slider, {"minimum": 1, "maximum": 12, "step": 1}),
     "upcast_attn": OptionInfo(False, "Upcast cross attention layer to float32"),
     "sd_max_resolution": OptionInfo(2048, "Max resolution output for txt2img and img2img"),
+    
 }))
 
 options_templates.update(options_section(('compatibility', "Compatibility"), {
@@ -471,6 +472,7 @@ options_templates.update(options_section(('ui', "User interface"), {
     "ui_header_tabs": OptionInfo("", "Header Tabs"),
     "ui_views_order": OptionInfo("row-reverse", "Interface order input/parameters | output/preview", gr.Radio, {"choices": ["row", "row-reverse"]}),
     "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order"),
+    "ui_performant_gradio_input_components": OptionInfo("", "Performant gradio input components. Use css selectors"),
     "localization": OptionInfo("None", "Localization (requires restart)", gr.Dropdown, lambda: {"choices": ["None"] + list(localization.localizations.keys())}, refresh=lambda: localization.list_localizations(cmd_opts.localizations_dir)),
 }))
 
diff --git a/style.css b/style.css
index ae8e1c0f..b1511825 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-:host{--main-bg-color:hsl(195deg 22% 8%);--primary-color:hsl(159deg 96% 55%);--input-bg-color:hsl(202deg 25% 12%);--input-border-color:hsl(200deg 24% 32%);--panel-bg-color:hsl(200deg 24% 20%);--panel-border-color:hsl(200deg 24% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(195deg 22% 8%);--subgroup-input-bg-color:hsl(200deg 24% 8%);--subgroup-input-border-color:hsl(200deg 24% 32%);--subpanel-bg-color:hsl(202deg 25% 12%);--subpanel-border-color:hsl(200deg 24% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(152deg 3% 36%);--input-focus-color:hsl(159deg 96% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(200deg 24% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(159deg 96% 55%);--icon-hover-color:hsl(195deg 22% 8%);--icon-size:22px;--nav-bg-color:hsl(194deg 24% 4%);--nav-color:hsl(201deg 24% 77%);--nav-hover-color:hsl(194deg 24% 4%);--input-color:hsl(159deg 96% 55%);--label-color:hsl(201deg 24% 77%);--subgroup-input-color:hsl(302deg 100% 100%);--placeholder-color:hsl(200deg 24% 32%);--text-color:hsl(201deg 24% 77%);--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;--frame-bg-color:hsl(200deg 25% 12%);}/*BREAKPOINT_CSS_CONTENT*/
+:host{--main-bg-color:hsl(0deg 0% 10%);--primary-color:hsl(168deg 97% 41%);--input-bg-color:hsl(225deg 6% 13%);--input-border-color:hsl(214deg 5% 30%);--panel-bg-color:hsl(225deg 5% 17%);--panel-border-color:hsl(214deg 5% 30%);--panel-border-radius:0px;--subgroup-bg-color:hsl(0deg 0% 10%);--subgroup-input-bg-color:hsl(225deg 6% 13%);--subgroup-input-border-color:hsl(214deg 5% 30%);--subpanel-bg-color:hsl(220deg 4% 14%);--subpanel-border-color:hsl(214deg 5% 30%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(168deg 97% 41%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(0deg 84% 60%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(168deg 97% 41%);--icon-hover-color:hsl(0deg 0% 10%);--icon-size:22px;--nav-bg-color:hsl(0deg 0% 4%);--nav-color:hsl(210deg 4% 80%);--nav-hover-color:hsl(0deg 0% 4%);--input-color:hsl(210deg 4% 80%);--label-color:hsl(210deg 4% 80%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(214deg 5% 30%);--text-color:hsl(210deg 4% 80%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;--frame-bg-color:hsl(225deg 6% 13%);}/*BREAKPOINT_CSS_CONTENT*/
 
 /*
 Theme Name: DarkUX
@@ -3084,7 +3084,9 @@ ul.list-none {
   transition: none !important;
 }
 
-
+#ui_theme_settings > div{
+	max-width:120px;
+}
 
 /*********************/
 /* Mobile breakpoint */