diff --git a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.directive.js b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.directive.js
new file mode 100644
index 0000000000..65ce8755b2
--- /dev/null
+++ b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.directive.js
@@ -0,0 +1,45 @@
+function CapacityAdjuster (templateUrl, $http) {
+    return {
+        scope: {
+            state: '='
+        },
+        templateUrl: templateUrl('instance-groups/capacity-adjuster/capacity-adjuster'),
+        restrict: 'E',
+        link: function(scope) {
+            let adjustment_values = [{
+                label: 'CPU',
+                value: scope.state.cpu_capacity,
+            },{
+                label: 'RAM',
+                value: scope.state.mem_capacity
+            }];
+
+            scope.min_capacity = _.min(adjustment_values, 'value');
+            scope.max_capacity = _.max(adjustment_values, 'value');
+
+        },
+        controller: function($http, $scope) {
+            const vm = this || {};
+
+            vm.slide = (state) => {
+                let data = {
+                    "capacity_adjustment": state.capacity_adjustment
+                };
+                let req = {
+                    method: 'PUT',
+                    url: state.url,
+                    data
+                };
+                $http(req);
+            }
+        },
+        controllerAs: 'vm'
+    };
+}
+
+CapacityAdjuster.$inject = [
+    'templateUrl',
+    '$http'
+];
+
+export default CapacityAdjuster;
\ No newline at end of file
diff --git a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.partial.html b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.partial.html
new file mode 100644
index 0000000000..d3200f49eb
--- /dev/null
+++ b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.partial.html
@@ -0,0 +1,14 @@
+<div class="at-InputSlider"
+style="align-items:center;margin-right:20px">
+    <p>{{min_capacity.label}}</p>
+    <p>{{min_capacity.value}}</p>
+        <input string-to-number
+        type="range"
+        ng-model="state.capacity_adjustment"
+        min="0"
+        max="1"
+        step="0.1"
+        ng-change="vm.slide(state)"/>
+    <p>{{max_capacity.label}}</p>
+    <p>{{max_capacity.value}}</p>
+</div>
diff --git a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
index 814588a101..8f97077cf8 100644
--- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
+++ b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
@@ -54,6 +54,7 @@
                 </div>
 
                 <div class="at-Row-actions">
+                    <capacity-adjuster state="instance"></capacity-adjuster>
                     <capacity-bar label-value="Used Capacity" capacity="instance.consumed_capacity" total-capacity="instance.capacity"></capacity-bar>
                 </div>
             </at-row>
diff --git a/awx/ui/client/src/instance-groups/instances/instances.controller.js b/awx/ui/client/src/instance-groups/instances/instances.controller.js
index 6e8de76864..c8c7b3d3af 100644
--- a/awx/ui/client/src/instance-groups/instances/instances.controller.js
+++ b/awx/ui/client/src/instance-groups/instances/instances.controller.js
@@ -1,4 +1,4 @@
-function InstancesController ($scope, $state, models, strings, Dataset) {
+function InstancesController ($scope, $state, $http, models, Instance, strings, Dataset) {
     const { instanceGroup } = models;
     const vm = this || {};
     vm.strings = strings;
@@ -37,7 +37,6 @@ function InstancesController ($scope, $state, models, strings, Dataset) {
         }
     };
 
-
     $scope.isActive = function(id) {
         let selected = parseInt($state.params.instance_id);
         return id === selected;
@@ -47,7 +46,9 @@ function InstancesController ($scope, $state, models, strings, Dataset) {
 InstancesController.$inject = [
     '$scope',
     '$state',
+    '$http',
     'resolvedModels',
+    'InstanceModel',
     'InstanceGroupsStrings',
     'Dataset'
 ];
diff --git a/awx/ui/client/src/instance-groups/main.js b/awx/ui/client/src/instance-groups/main.js
index 8489cf83f5..06afc31c66 100644
--- a/awx/ui/client/src/instance-groups/main.js
+++ b/awx/ui/client/src/instance-groups/main.js
@@ -5,6 +5,7 @@ import InstanceGroupJobsListController from './jobs/jobs.controller';
 import InstanceListController from './instances/instances.controller';
 import InstanceJobsController from './instances/instance-jobs/instance-jobs.controller';
 import CapacityBar from './capacity-bar/main';
+import CapacityAdjuster from './capacity-adjuster/capacity-adjuster.directive';
 import list from './instance-groups.list';
 import service from './instance-groups.service';
 
@@ -324,6 +325,7 @@ angular.module(MODULE_NAME, [CapacityBar.name])
     .controller('InstanceJobsController', InstanceJobsController)
     .directive('instanceGroupsMultiselect', instanceGroupsMultiselect)
     .directive('instanceGroupsModal', instanceGroupsModal)
+    .directive('capacityAdjuster', CapacityAdjuster)
     .service('InstanceGroupsStrings', InstanceGroupsStrings)
     .service('JobStrings', JobStrings)
     .run(InstanceGroupsRun);