diff --git a/ui/stories/kapacitor.js b/ui/stories/kapacitor.js
index 1d43c4709..9f30079c0 100644
--- a/ui/stories/kapacitor.js
+++ b/ui/stories/kapacitor.js
@@ -18,12 +18,12 @@ import * as queryActions from 'src/chronograf/actions/view';
 import KapacitorRule from 'src/kapacitor/components/KapacitorRule';
 import ValuesSection from 'src/kapacitor/components/ValuesSection';
 
-const valuesSection = (trigger, range = false) => (
+const valuesSection = (trigger, values) => (
   <div className="rule-builder">
     <ValuesSection
       rule={rule({
         trigger,
-        range,
+        values,
       })}
       query={query()}
       onChooseTrigger={action('chooseTrigger')}
@@ -34,16 +34,41 @@ const valuesSection = (trigger, range = false) => (
 
 storiesOf('ValuesSection', module)
   .add('Threshold', () => (
-    valuesSection('threshold')
+    valuesSection('threshold', {
+      "operator": "less than",
+      "rangeOperator": "greater than",
+      "value": "10",
+      "rangeValue": "20",
+    })
   ))
-  .add('Threshold with Range', () => (
-    valuesSection('threshold', true)
+  .add('Threshold within Range', () => (
+    valuesSection('threshold', {
+      "operator": "within range",
+      "rangeOperator": "greater than",
+      "value": "10",
+      "rangeValue": "20",
+    })
   ))
+  // .add('Threshold outside of Range', () => (
+  //   valuesSection('threshold', {
+  //     "operator": "otuside of range",
+  //     "rangeOperator": "less than",
+  //     "value": "10",
+  //     "rangeValue": "20",
+  //   })
+  // ))
   .add('Relative', () => (
-    valuesSection('relative')
+    valuesSection('relative', {
+      "change": "change",
+      "operator": "greater than",
+      "shift": "1m",
+      "value": "10",
+    })
   ))
   .add('Deadman', () => (
-    valuesSection('deadman')
+    valuesSection('deadman', {
+      "period": "10m",
+    })
   ));
 
 storiesOf('KapacitorRule', module)
diff --git a/ui/stories/stubs/rule.js b/ui/stories/stubs/rule.js
index 5e6c2e079..747639cd1 100644
--- a/ui/stories/stubs/rule.js
+++ b/ui/stories/stubs/rule.js
@@ -1,8 +1,8 @@
 const rule = ({
   trigger,
-  range,
+  values,
 }) => {
-  let values = {
+  values = {
     "rangeOperator": "greater than",
     "change": "change",
     "operator": "greater than",
@@ -10,46 +10,9 @@ const rule = ({
     "value": "10",
     "rangeValue": "20",
     "period": "10m",
+    ...values,
   };
 
-  switch (trigger) {
-    case 'threshold':
-      if (range) {
-        values = {
-          ...values,
-          "operator": "within range",
-          "rangeOperator": "greater than",
-          "value": "10",
-          "rangeValue": "20",
-        };
-      }
-      else {
-        values = {
-          ...values,
-          "operator": "less than",
-          "rangeOperator": "greater than",
-          "value": "10",
-          "rangeValue": "20",
-        };
-      }
-      break;
-    case 'relative':
-      values = {
-        ...values,
-        "change": "change",
-        "operator": "greater than",
-        "shift": "1m",
-        "value": "10",
-      };
-      break;
-    case 'deadman':
-      values = {
-        ...values,
-        "period": "10m",
-      };
-      break;
-  }
-
   return ({
     "id": "chronograf-v1-08cdb16b-7874-4c8f-858d-1c07043cb2f5",
     "query": {