Sliders, checkboxes anad selects handled

javascript/state.ext.control-net.js

@@ -45,11 +45,59 @@ state.extensions['control-net'] = (function () {
         bindTabEvents();
     }
 
+    function handleCheckboxes() {
+        let checkboxes = container.querySelectorAll('input[type="checkbox"]');
+        checkboxes.forEach(function (checkbox) {
+           let label = checkbox.nextElementSibling;
+           let id = state.utils.txtToId(label.textContent);
+           let value = store.get(id);
+           if (value) {
+               state.utils.setValue(checkbox, value, 'change');
+           }
+           checkbox.addEventListener('change', function () {
+               store.set(id, this.checked);
+           });
+        });
+    }
+
+    function handleSelects() {
+        let selects = container.querySelectorAll('select');
+        selects.forEach(function (select) {
+            let label = select.previousElementSibling;
+            let id = state.utils.txtToId(label.textContent);
+            let value = store.get(id);
+            if (value) {
+                state.utils.setValue(select, value, 'change');
+            }
+            select.addEventListener('change', function () {
+                store.set(id, this.value);
+            });
+        });
+    }
+
+    function handleSliders() {
+        let sliders = container.querySelectorAll('input[type="range"]');
+        sliders.forEach(function (slider) {
+            let label = slider.previousElementSibling.querySelector('label span');
+            let id = state.utils.txtToId(label.textContent);
+            let value = store.get(id);
+            if (value) {
+                state.utils.setValue(slider, value, 'change');
+            }
+            slider.addEventListener('change', function () {
+                store.set(id, this.value);
+            });
+        });
+    }
+
     function init() {
         container = gradioApp().getElementById('controlnet');
         store = new state.Store('ext-control-net');
         handleToggle();
         handleTabs();
+        handleCheckboxes();
+        handleSelects();
+        handleSliders();
     }
 
     return { init };

javascript/state.utils.js

@@ -26,5 +26,8 @@ state.utils = {
                 element.value = value;
                 this.triggerEvent(element, event);
         }
+    },
+    txtToId: function txtToId(txt) {
+        return txt.split(' ').join('-').toLowerCase();
     }
 };