Added slider for Brightness and Blur modules (#428)

examples/lib/defaultHtmlStepUi.js

@@ -75,8 +75,20 @@ function DefaultHtmlStepUi(_sequencer, options) {
             '" value="' +
             paramVal +
             '" placeholder ="' +
-            (inputDesc.placeholder || "") +
-            '">';
+            (inputDesc.placeholder || "");
+            
+           if(inputDesc.type.toLowerCase() == "range")
+           {
+             html+=
+              '"min="'+
+              inputDesc.min +
+              '"max="'+
+              inputDesc.max +
+              '"step="' +
+              inputDesc.step + '">'+'<span>'+paramVal+'</span>';
+
+           }
+           else html+= '">';
         }
 
         var div = document.createElement("div");
@@ -133,6 +145,12 @@ function DefaultHtmlStepUi(_sequencer, options) {
         );
 
     stepsEl.appendChild(step.ui);
+    
+    var inputs = document.querySelectorAll('input[type="range"]')
+    for(i in inputs)
+    inputs[i].oninput = function(e) {
+      e.target.nextSibling.innerHTML = e.target.value;
+    }
   }
 
   function onDraw(step) {

src/modules/Blur/info.json

@@ -3,9 +3,12 @@
     "description": "Applies a Gaussian blur given by the intensity value",
     "inputs": {
         "blur": {
-            "type": "integer",
+            "type": "range",
             "desc": "Amount of gaussian blur(Less blur gives more detail, typically 0-5)",
-            "default": 2
+            "default": "2",
+            "min": "0",
+            "max": "5",
+            "step": "0.25"
         }
     }
 }

src/modules/Brightness/info.json

@@ -3,10 +3,12 @@
   "description": "Change the brightness of the image by given percent value",
   "inputs": {
       "brightness": {
-          "type": "number",
+          "type": "range",
           "desc": "% brightness for the new image",
-          "placeholder": "0",
-          "default": 0 
+          "default": "0",
+          "min": "0",
+          "max": "100",
+          "step": "1"
       }
   } 
 }