Created an Angular slider directive to support JQueryUI slider widget. Job Template page now uses a slider for Forks value. User can set the value with the slider or type in a value btwn 0 and 100. Additionally turned verbosity into a drop-down.

ansibleworks/ui/static/lib/ansible/directives.js

@@ -165,7 +165,45 @@ angular.module('AWDirectives', ['RestServices'])
            $(element).popover({ placement: placement, delay: 0, title: title, 
                content: attrs.awPopOver, delay: 0, trigger: 'click', html: true });
        }
-       });
+       })
+
+    //
+    // Enable jqueryui slider widget on a numeric input field
+    //
+    // <input type="number" ng-slider name="myfield" min="0" max="100" />
+    //
+    .directive('ngSlider', [ function() {
+        return {
+        require: 'ngModel',
+        link: function(scope, elm, attrs, ctrl) {
+            var name = elm.attr('name');
+            $('#' + name + '-slider').slider({
+                value: 0,
+                step: 1,
+                min: elm.attr('min'),
+                max: elm.attr('max'),
+                slide: function(e, u) {
+                   ctrl.$setViewValue(u.value);
+                   ctrl.$setValidity('required',true);
+                   ctrl.$setValidity('min', true);
+                   ctrl.$setValidity('max', true);
+                   ctrl.$dirty = true;
+                   ctrl.$render();
+                   scope['job_templates_form'].$dirty = true;
+                   if (!scope.$$phase) {
+                       scope.$digest();
+                   }
+                   }
+                });
+
+            $('#' + name + '-number').change( function() {
+                $('#' + name + '-slider').slider('value', parseInt( $(this).val() ));
+                });
+
+            
+            }
+        }
+        }]);
 
 
 

ansibleworks/ui/static/lib/ansible/form-generator.js

@@ -107,7 +107,12 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
     applyDefaults: function() {
        for (fld in this.form.fields) {
            if (this.form.fields[fld].default || this.form.fields[fld].default == 0) {
-              this.scope[fld] = this.form.fields[fld].default;
+              if (this.form.fields[fld].type == 'select' && this.scope[fld + '_options']) {
+                 this.scope[fld] = this.scope[fld + '_options'][this.form.fields[fld].default];
+              }
+              else {
+                 this.scope[fld] = this.form.fields[fld].default;
+              }
            }
        }
        },
@@ -311,18 +316,22 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
              html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n";
              html += "<div class=\"controls\">\n"; 
              // Use 'text' rather than 'number' so that our integer directive works correctly
-             html += "<input type=\"text\" value=\"" + field.default + "\" class=\"spinner\" ";
+             html += (field.slider) ? "<div class=\"slider\" id=\"" + fld + "-slider\"></div>\n" : "";
+             html += "<input type=\"text\" value=\"" + field.default + "\" ";
+             html += (field.class) ? this.attr(field, 'class') : "";
+             html += (field.slider) ? "ng-slider=\"" + fld + "\" " : ""; 
              html += "ng-model=\"" + fld + '" ';
              html += 'name="' + fld + '" ';
              html += (field.min || field.min == 0) ? this.attr(field, 'min') : "";
              html += (field.max) ? this.attr(field, 'max') : "";
              html += (field.ngChange) ? this.attr(field,'ngChange') : "";
-             html += (field.id) ? this.attr(field,'id') : "";
+             html += (field.slider) ? "id=\"" + fld + "-number\"" : (field.id) ? this.attr(field,'id') : "";
              html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
              html += (options.mode == 'add' && field.addRequired) ? "required " : "";
              html += (field.readonly) ? "readonly " : "";
              html += (field.integer) ? "integer " : "";
-             html += "/><br />\n";
+             html += "/>\n";
+             html += "<br />\n";
              // Add error messages
              if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
                 html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " + 
@@ -535,8 +544,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                  var button = this.form.buttons[btn];
                  //button
                  html += "<button ";
-                 html += "class=\"btn"; 
-                 html += (this.form.twoColumns) ? "" : " btn-small";
+                 html += "class=\"btn btn-small";
                  html += (button.class) ? " " + button.class : "";
                  html += "\" ";
                  if (button.ngClick) {