diff --git a/octoprint_customControl/static/js/customControl.js b/octoprint_customControl/static/js/customControl.js
index 41eb88f..f140d70 100644
--- a/octoprint_customControl/static/js/customControl.js
+++ b/octoprint_customControl/static/js/customControl.js
@@ -66,30 +66,34 @@
             return controls;
         };
 
-        self._processInput = function (control) {
-            for (var i = 0; i < control.input.length; i++) {
-                if (!control.processed) {
-                    control.input[i].value = ko.observable(control.input[i].default);
-                    control.input[i].default = ko.observable(control.input[i].default);
-                }
+        self._processInput = function (list) {
+            var inputs = [];
 
-                if (control.processed)
-                    control.input[i].value(control.input[i].default());
+            for (var i = 0; i < list.length; i++) {
+                var input = {
+                    name: ko.observable(list[i].name),
+                    parameter: ko.observable(list[i].parameter),
+                    defaultValue: ko.observable(list[i].defaultValue)
+                };
 
-                if (!control.input[i].hasOwnProperty("slider"))
-                    control.input[i].slider = ko.observable(false);
-                else if (!control.processed)
-                    control.input[i].slider = ko.observable(control.input[i].slider);
+                if (list[i].hasOwnProperty("slider") && typeof list[i].slider == "object")
+                    input.slider = ko.mapping.fromJS(list[i].slider);
+                else
+                    input.slider = false;
+
+                inputs.push(input);
             }
+
+            return inputs;
         }
         self._processControl = function (parent, control) {
             control.id = ko.observable("settingsCustomControl_id" + self.staticID++);
             control.parent = parent;
 
-            if (control.hasOwnProperty("template") && control.hasOwnProperty("regex") && control.hasOwnProperty("deflt")) {
+            if (control.hasOwnProperty("template") && control.hasOwnProperty("regex") && control.hasOwnProperty("defaultValue")) {
                 control.template = ko.observable(control.template);
                 control.regex = ko.observable(control.regex);
-                control.deflt = ko.observable(control.deflt);
+                control.defaultValue = ko.observable(control.defaultValue);
             }
 
             if (control.hasOwnProperty("children")) {
@@ -130,7 +134,10 @@
             }
 
             if (control.hasOwnProperty("input")) {
-                self._processInput(control);
+                if (control.processed)
+                    control.input(self._processInput(control.input()));
+                else
+                    control.input = ko.observableArray(self._processInput(control.input));
             }
 
             var js;
@@ -198,6 +205,8 @@
 
         self.createElement = function (invokedOn, contextParent, selectedMenu) {
             if (invokedOn.attr('id') == "base") {
+                self.customControlDialogViewModel.reset();
+
                 self.customControlDialogViewModel.show(function (ret) {
                     self.controlsFromServer.push(ret);
                     self.rerenderControls();
@@ -213,6 +222,8 @@
                     return;
                 }
 
+                self.customControlDialogViewModel.reset({ parent: parentElement });
+
                 self.customControlDialogViewModel.show(function (ret) {
                     parentElement.children.push(self._processControl(parentElement, ret));
                 });
@@ -286,8 +297,8 @@
             }
             if (element.hasOwnProperty("regex"))
                 data.regex = element.regex();
-            if (element.hasOwnProperty("deflt"))
-                data.deflt = element.deflt();
+            if (element.hasOwnProperty("defaultValue"))
+                data.defaultValue = element.defaultValue();
 
             if (element.hasOwnProperty("width"))
                 data.width = element.width();
@@ -347,7 +358,6 @@
 
                         delete element.command;
                         delete element.commands;
-                        delete element.input;
 
                         if (ret.command != undefined)
                             element.command = ret.command;
@@ -355,9 +365,10 @@
                             element.commands = ret.commands;
 
                         if (ret.input != undefined) {
-                            element.input = ret.input;
-                            self._processInput(element);
+                            element.input(self._processInput(ret.input));
                         }
+                        else
+                            delete element.input;
                         break;
                     }
                     case "output": {
@@ -382,7 +393,6 @@
         {
             switch (selectedMenu.attr('cmd')) {
                 case "createContainer": {
-                    self.customControlDialogViewModel.reset();
                     self.customControlDialogViewModel.title(gettext("Create container"));
                     self.customControlDialogViewModel.type("container");
 
@@ -390,7 +400,6 @@
                     break;
                 }
                 case "createCommand": {
-                    self.customControlDialogViewModel.reset();
                     self.customControlDialogViewModel.title(gettext("Create Command"));
                     self.customControlDialogViewModel.type("command");
 
@@ -398,7 +407,6 @@
                     break;
                 }
                 case "createOutput": {
-                    self.customControlDialogViewModel.reset();
                     self.customControlDialogViewModel.title(gettext("Create Output"));
                     self.customControlDialogViewModel.type("output");
 
diff --git a/octoprint_customControl/static/js/customControlDialog.js b/octoprint_customControl/static/js/customControlDialog.js
index 2b7f395..c5c7c2f 100644
--- a/octoprint_customControl/static/js/customControlDialog.js
+++ b/octoprint_customControl/static/js/customControlDialog.js
@@ -26,10 +26,14 @@
             if (self.element() == undefined || self.element().input == undefined)
                 return false;
 
-            _.each(self.element().input(), function (element, index, list) {
-                if (element.hasOwnProperty("slider"))
-                    return true;
-            });
+            var inputs = self.element().input()
+            for(var i = 0; i < inputs.length; i++)    
+            {
+                if (inputs[i].hasOwnProperty("slider")) {
+                    if (typeof inputs[i].slider == "object")
+                        return true;
+                }
+            }
             return false;
         });
         self.span = function(parameter) {
@@ -54,7 +58,7 @@
                 name: undefined,
                 collapsable: true,
                 commands: "",
-                deflt: "",
+                defaultValue: "",
                 script: "",
                 javascript: "",
                 enabled: "",
@@ -71,12 +75,21 @@
             if (typeof data == "object")
                 element = _.extend(element, data);
 
-            self.element(ko.mapping.fromJS(element));
-        }
+            var mapped = ko.mapping.fromJS(element);
+            if (data.hasOwnProperty("input")) {
+                self.useInputs(true);
 
+                //_.each(mapped.input(), function (e, index, list) {
+                //    if (e.hasOwnProperty("slider") && !$.isFunction(e.slider))
+                //        e.slider = ko.observable(e.slider);
+                //});
+            }
+
+            self.element(mapped);
+        }
         self.show = function (f) {
             var dialog = $("#customControlDialog");
-            var primarybtn = $('.btn-primary', dialog);
+            var primarybtn = $('div.modal-footer .btn-primary', dialog);
 
             primarybtn.unbind('click').bind('click', function (e) {
                 var obj = ko.mapping.toJS(self.element());
@@ -112,9 +125,9 @@
                                 var input = {
                                     name: element.name,
                                     parameter: element.parameter,
-                                    default: element.default
+                                    defaultValue: element.defaultValue
                                 };
-                                if (element.hasOwnProperty("slider")) {
+                                if (element.hasOwnProperty("slider") && element.slider != false) {
                                     input["slider"] = {
                                     };
 
@@ -125,6 +138,8 @@
                                     if (element.slider.hasOwnProperty("step") && element.slider.step != "")
                                         input.slider.step = element.slider.step;
                                 }
+
+                                el.input.push(input);
                             });
                         }
                         break;
@@ -132,7 +147,7 @@
                     case "output": {
                         el.template = obj.template;
                         el.regex = obj.regex;
-                        el.deflt = obj.deflt;
+                        el.defaultValue = obj.defaultValue;
 
                         el.width = obj.width;
                         el.offset = obj.offset;
@@ -149,6 +164,34 @@
                 keyboard: false
             });
         }
+
+        self.removeInput = function (data) {
+            self.element().input.remove(data);
+        }
+        self.addInput = function () {
+            var obj = {
+                name: ko.observable(""),
+                parameter: ko.observable(""),
+                defaultValue: ko.observable(""),
+                slider: false
+            }
+
+            self.element().input.push(obj);
+        }
+        self.addSliderInput = function () {
+            var obj = {
+                name: ko.observable(""),
+                parameter: ko.observable(""),
+                defaultValue: ko.observable(""),
+                slider: {
+                    min: ko.observable(""),
+                    max: ko.observable(""),
+                    step: ko.observable("")
+                }
+            }
+
+            self.element().input.push(obj);
+        }
     }
 
     // view model class, parameters for constructor, container to bind to
diff --git a/octoprint_customControl/templates/octoprint_customControl.jinja2 b/octoprint_customControl/templates/octoprint_customControl.jinja2
index 117f708..b807670 100644
--- a/octoprint_customControl/templates/octoprint_customControl.jinja2
+++ b/octoprint_customControl/templates/octoprint_customControl.jinja2
@@ -16,7 +16,7 @@
             <div class="control-group">
                 <label class="control-label">{{ _('Layout') }}</label>
                 <div class="controls">
-                    <select data-bind="options: $root.layouts, optionsText: 'name', optionsValue: 'key', value: layout, valueAllowUnset: false"></select>
+                    <select data-bind="options: $parent.layouts, optionsText: 'name', optionsValue: 'key', value: layout, valueAllowUnset: false"></select>
                 </div>
             </div>
             <!-- ko if: name && name() != "" -->
@@ -35,7 +35,7 @@
             </div>
 
             <div class="control-group">
-                <label class="control-label"><input type="checkbox" data-bind="checked: $root.useInputs"></input>{{ _('Use Inputs') }}</label>
+                <label class="control-label"><input type="checkbox" data-bind="checked: $parent.useInputs"></input>{{ _('Use Inputs') }}</label>
             </div>
             <!-- ko if: $root.useInputs -->
             <div class="control-group">
@@ -57,16 +57,18 @@
                         <div data-bind="css: $root.span('name')"><input class="span12" data-bind="value: name"></input></div>
                         <div data-bind="css: $root.span('parameter')"><input class="span12" data-bind="value: parameter"></input></div>
                         <div data-bind="css: $root.span('default')"><input class="span12" data-bind="value: defaultValue"></input></div>
-                        <!-- ko if: $root.hasSlider -->
-                        <div class="span2"><input class="span12" data-bind="value: slide().min"></input></div>
-                        <div class="span2"><input class="span12" data-bind="value: slide().max"></input></div>
-                        <div class="span1"><input class="span12" data-bind="value: slide().step"></input></div>
+                        <!-- ko if: slider -->
+                        <div class="span2"><input class="span12" data-bind="value: slider.min"></input></div>
+                        <div class="span2"><input class="span12" data-bind="value: slider.max"></input></div>
+                        <div class="span1"><input class="span12" data-bind="value: slider.step"></input></div>
+                        <div class="span1"><a href="#" title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput"><i class="icon-trash"></i></a></div>
                         <!-- /ko -->
-                        <div class="span1"><a title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput($data)"><i class="icon-trash"></i></a></div>
+                        <div class="span1" data-bind="ifnot: slider, css: { 'offset5': $root.hasSlider() }"><a href="#" title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput"><i class="icon-trash"></i></a></div>
                     </div>
                 </div>
                 <div class="row-fluid">
-                    <div class="offset11 span1"><a title="Add Input" class="btn btn-primary" data-bind="click: $root.addInput"><i class="icon-plus"></i></a></div>
+                    <div class="offset10 span1"><a href="#" title="Add Input" class="btn btn-primary" data-bind="click: $root.addInput"><i class="icon-plus"></i></a></div>
+                    <div class="span1"><a href="#" title="Add Slider" class="btn btn-primary" data-bind="click: $root.addSliderInput"><i class="icon-plus"></i></a></div>
                 </div>
             </div>
             <!-- /ko -->
@@ -88,7 +90,7 @@
             <div class="control-group">
                 <label class="control-label">{{ _('Default Message') }}</label>
                 <div class="controls">
-                    <input style="width: 97%" data-bind="value: deflt"></input>
+                    <input style="width: 97%" data-bind="value: defaultValue"></input>
                 </div>
             </div>
             <!-- /ko -->
diff --git a/octoprint_customControl/templates/octoprint_customControl_settings.jinja2 b/octoprint_customControl/templates/octoprint_customControl_settings.jinja2
index 939636e..eecb7ce 100644
--- a/octoprint_customControl/templates/octoprint_customControl_settings.jinja2
+++ b/octoprint_customControl/templates/octoprint_customControl_settings.jinja2
@@ -2,8 +2,9 @@
 
 <div style="min-height:15px; margin: 16px 16px; border:1px solid #00e500" id="base" data-bind="contextMenu: { menuSelector: '#controlContextMenu', menuSelected: $root.controlContextMenu }, visible: loginState.isUser">
 </div>
-											
-<div style="clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
+
+<!-- "width: 588px" to be the same as teh real Control tab-->						
+<div style="width: 588px; clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
 
 <ul id="controlContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;">
 	<li>
@@ -44,24 +45,24 @@
 </ul>
 
 <!-- Templates for custom controls -->
-<script type="text/html" id="settingsCustomControls_containerTemplate">
-    <div class="custom_container custom_section_vertical_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
-        <!-- ko if: layout() == 'vertical' -->
-        <div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
-        <!-- /ko -->
-
-        <!-- ko if: layout() == 'horizontal' -->
-        <div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
-        <!-- /ko -->
-
-        <!-- ko if: layout() == 'horizontal_grid' -->
-        <div class="row-fluid custom_section custom_section_horizontal_grid">
-            <!-- ko foreach: children -->
-            <div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
-            <!-- /ko -->
-        </div>
-        <!-- /ko -->
-    </div>
+<script type="text/html" id="settingsCustomControls_containerTemplate">
+    <div class="custom_container custom_section_vertical_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
+        <!-- ko if: layout() == 'vertical' -->
+        <div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
+        <!-- /ko -->
+
+        <!-- ko if: layout() == 'horizontal' -->
+        <div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
+        <!-- /ko -->
+
+        <!-- ko if: layout() == 'horizontal_grid' -->
+        <div class="row-fluid custom_section custom_section_horizontal_grid">
+            <!-- ko foreach: children -->
+            <div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
+            <!-- /ko -->
+        </div>
+        <!-- /ko -->
+    </div>
 </script>
 <script type="text/html" id="settingsCustomControls_containerTemplate_accordion">
     <div class="custom_container accordion-group" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': ($parent && $parent.layout && $parent.layout() == 'horizontal') }">
@@ -73,7 +74,7 @@
         </div>
         <!-- /ko -->
 
-        <!-- ko if: layout -->
+        <!-- ko if: layout -->
         <div class="accordion-body" data-bind="attr: { 'id': 'toggle_' + id() }, css: { 'collapse in': collapsable }">
             <!-- ko if: layout() == 'vertical' -->
             <div class="custom_section custom_section_vertical accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
@@ -93,25 +94,27 @@
     </div>
 </script>
 <script type="text/html" id="settingsCustomControls_controlTemplate">
-    <form class="form-inline control-tab custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
+    <form class="form-inline custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
         <!-- ko template: { name: 'settingsCustomControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->
         <!-- ko template: { name: 'settingsCustomControls_controlTemplate_command', data: $data, if: $data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript') } --><!-- /ko -->
-        <!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('deflt') } --><!-- /ko -->
+        <!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('defaultValue') } --><!-- /ko -->
     </form>
 </script>
 <script type="text/html" id="settingsCustomControls_controlTemplate_input">
     <!-- ko foreach: input -->
+    <div class="form-inline">
         <label style="cursor: default" data-bind="text: name"></label>
         <!-- ko if: slider -->
-            <input type="number" style="width: 100px" data-bind="slider: {value: value, min: slider.min, max: slider.max, step: slider.step}">
+            <input type="number" style="width: 100px" data-bind="slider: {value: defaultValue, min: slider.min(), max: slider.max(), step: slider.step()}">
         <!-- /ko -->
         <!-- ko ifnot: slider -->
-            <input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: value">
+            <input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: defaultValue">
         <!-- /ko -->
+    </div>
     <!-- /ko -->
 </script>
 <script type="text/html" id="settingsCustomControls_controlTemplate_output">
-    <label style="cursor: default" data-bind="text: deflt"></label>
+    <label style="cursor: default" data-bind="text: defaultValue"></label>
 </script>
 <script type="text/html" id="settingsCustomControls_controlTemplate_command">
     <button class="btn" data-bind="text: name"></button>