diff --git a/README.md b/README.md
index df121c8..752bb47 100644
--- a/README.md
+++ b/README.md
@@ -21,4 +21,4 @@ c,d
 d,a
 ```
 * Click "Start Layout".
-* Play with the controls!
+* Play with the controls!
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 829b1c8..ec3ec20 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,115 +1,25 @@
 <template>
   <v-app>
     <v-navigation-drawer fixed app class="pa-4">
-      <v-btn block @click="$refs.file.click()">Upload CSV or JSON</v-btn>
-      <input ref="file" type="file" style="display:none" @change="upload">
+      <upload @file="upload" />
       <div>{{ nodeCount }} nodes, {{ edgeCount }} edges</div>
-      <v-checkbox
-        v-model="showEdges"
-        label="Show edges"
-        hide-details
-      ></v-checkbox>
-      <v-slider
-        v-model="edgeOpacity"
-        :min="0.01" :max="1.00" :step="0.01"
-        thumb-label
-        label="Edge opacity"
-        hide-details
-      ></v-slider>
-      <v-slider
-        v-model="size"
-        :min="0.01" :max="1" :step="0.01"
-        thumb-label
-        label="Size"
-        hide-details
-      ></v-slider>
-      <v-combobox
-        v-model="sizeField"
-        :items="['None', ...fields]"
-        label="Size field"
-        hide-details
-      ></v-combobox>
+      <v-checkbox v-model="showEdges" label="Show edges" hide-details></v-checkbox>
+      <under-one-slider v-model="edgeOpacity" :min="0.01" label="Edge opacity" />
+      <under-one-slider v-model="size" :min="0.01" label="Size" />
+      <field-box v-model="sizeField" :items="['None', ...fields]" label="Size field" />
       <v-btn block @click="toggleLayout">{{ layoutRunning ? 'Stop' : 'Start' }} layout</v-btn>
-      <v-slider
-        v-model="alpha"
-        :min="0.00" :max="1.00" :step="0.01"
-        thumb-label
-        :readonly="this.layoutRunning"
-        label="Energy"
-        hide-details
-      ></v-slider>
-      <v-slider
-        v-model="chargeStrength"
-        :min="0" :max="50" :step="1"
-        thumb-label
-        label="Charge strength"
-        hide-details
-      ></v-slider>
-      <v-slider
-        v-model="theta"
-        :min="0.5" :max="3.0" :step="0.1"
-        thumb-label
-        label="Charge approximation"
-        hide-details
-      ></v-slider>
-      <v-slider
-        v-model="collideStrength"
-        :min="0.00" :max="1.00" :step="0.01"
-        thumb-label
-        label="Collide force"
-        hide-details
-      ></v-slider>
-      <v-slider
-        v-model="linkStrength"
-        :min="0.00" :max="1.00" :step="0.01"
-        thumb-label
-        label="Link force"
-        hide-details
-      ></v-slider>
-      <v-checkbox
-        v-model="center"
-        label="Center force"
-        hide-details
-      ></v-checkbox>
-      <v-slider
-        v-model="xStrength"
-        :min="0.00" :max="1.00" :step="0.01"
-        thumb-label
-        label="X force"
-        hide-details
-      ></v-slider>
-      <v-combobox
-        v-model="xField"
-        :items="fields"
-        label="X field"
-        hide-details
-      ></v-combobox>
-      <v-slider
-        v-model="yStrength"
-        :min="0.00" :max="1.00" :step="0.01"
-        thumb-label
-        label="Y force"
-        hide-details
-      ></v-slider>
-      <v-combobox
-        v-model="yField"
-        :items="fields"
-        label="Y field"
-        hide-details
-      ></v-combobox>
-      <v-slider
-        v-model="radialStrength"
-        :min="0.00" :max="1.00" :step="0.01"
-        thumb-label
-        label="Radial force"
-        hide-details
-      ></v-slider>
-      <v-combobox
-        v-model="radialField"
-        :items="fields"
-        label="Radial field"
-        hide-details
-      ></v-combobox>
+      <under-one-slider v-model="alpha" :read-only="this.layoutRunning" label="Energy" />
+      <app-slider v-model="chargeStrength" :min="0" :max="50" :step="1" label="Charge strength" />
+      <app-slider v-model="theta" :min="0.5" :max="3.0" :step="0.1" label="Charge approximation" />
+      <under-one-slider v-model="collideStrength" label="Collide force" />
+      <under-one-slider v-model="linkStrength" label="Link force" />
+      <v-checkbox v-model="center" label="Center force" hide-details />
+      <under-one-slider v-model="xStrength" label="X force" />
+      <field-box v-model="xField" :items="fields" label="X field" />
+      <under-one-slider v-model="yStrength" label="Y force" />
+      <field-box v-model="yField" :items="fields" label="Y field" />
+      <under-one-slider v-model="radialStrength" label="Radial force" />
+      <field-box v-model="radialField" :items="fields" label="Radial field" />
       <v-btn block @click="download()">Download JSON</v-btn>
       <a ref="downloadAnchor" style="display:none"></a>
     </v-navigation-drawer>
@@ -120,10 +30,15 @@
 </template>
 
 <script>
-import geo from 'geojs/geo.js';
+import geo from "geojs/geo.js";
 
-import LayoutWorker from 'worker-loader!./worker.js';
-import * as scales from './scales.js';
+import UnderOneSlider from "./components/UnderOneSlider";
+import FieldBox from "./components/FieldBox";
+import Upload from "./components/Upload";
+import AppSlider from "./components/AppSlider";
+
+import LayoutWorker from "worker-loader!./worker.js";
+import * as scales from "./scales.js";
 
 const layoutWorker = new LayoutWorker();
 let map;
@@ -134,13 +49,19 @@ let positions;
 let nodeMap;
 
 export default {
-  data: function () {
+  components: {
+    FieldBox,
+    UnderOneSlider,
+    Upload,
+    AppSlider
+  },
+  data: function() {
     return {
       fields: [],
       showEdges: false,
       edgeOpacity: 0.5,
       size: 0.5,
-      sizeField: 'degree',
+      sizeField: "degree",
       layoutRunning: false,
       alpha: 1.0,
       alphaFromWorker: false,
@@ -156,7 +77,7 @@ export default {
       radialField: null,
       radialStrength: 0,
       nodeCount: 0,
-      edgeCount: 0,
+      edgeCount: 0
     };
   },
   mounted() {
@@ -165,10 +86,13 @@ export default {
       minx: -b,
       maxx: b,
       miny: -b,
-      maxy: b,
+      maxy: b
     };
     let params = geo.util.pixelCoordinateParams(
-      '#map', bounds.maxx - bounds.minx, bounds.maxy - bounds.miny);
+      "#map",
+      bounds.maxx - bounds.minx,
+      bounds.maxy - bounds.miny
+    );
 
     // the utility function assumes top left is 0, 0.  Move it to minx, miny.
     params.map.maxBounds.left += bounds.minx;
@@ -179,7 +103,10 @@ export default {
     params.map.center.y += bounds.miny;
 
     // inflate the bounds to add a border
-    const maxwh = Math.max(bounds.maxx - bounds.minx, bounds.maxy - bounds.miny);
+    const maxwh = Math.max(
+      bounds.maxx - bounds.minx,
+      bounds.maxy - bounds.miny
+    );
     params.map.maxBounds.left -= maxwh * 0.1;
     params.map.maxBounds.top -= maxwh * 0.1;
     params.map.maxBounds.right += maxwh * 0.1;
@@ -188,41 +115,45 @@ export default {
     // allow zoomming in until 1 unit of space is 2^(value) bigger.
     params.map.max += 3;
     map = geo.map(params.map);
-    let layer = map.createLayer('feature', {features: ['point', 'line']});
+    let layer = map.createLayer("feature", { features: ["point", "line"] });
 
-    const uiLayer = map.createLayer('ui', {zIndex: 2});
-    const tooltip = uiLayer.createWidget('dom', {position: {x: 0, y: 0}});
+    const uiLayer = map.createLayer("ui", { zIndex: 2 });
+    const tooltip = uiLayer.createWidget("dom", { position: { x: 0, y: 0 } });
     const tooltipElem = tooltip.canvas();
-    tooltipElem.setAttribute('id', 'tooltip');
-    tooltipElem.classList.toggle('hidden', true);
-    tooltipElem.style['pointer-events'] = 'none';
+    tooltipElem.setAttribute("id", "tooltip");
+    tooltipElem.classList.toggle("hidden", true);
+    tooltipElem.style["pointer-events"] = "none";
 
     map.draw();
 
     // Load the graph if we have one as a URL parameter
     const url = new URL(window.location.href);
-    const graphURL = url.searchParams.get('graph');
+    const graphURL = url.searchParams.get("graph");
     if (graphURL) {
       fetch(graphURL)
-        .then(response => Promise.all([response.text(), response.headers.get('Content-Type')]))
+        .then(response =>
+          Promise.all([response.text(), response.headers.get("Content-Type")])
+        )
         .then(([content, contentType]) => {
-          if (contentType.startsWith('application/json')) {
-            layoutWorker.postMessage({type: 'loadJSON', text: content});
-          } else if (contentType.startsWith('text/csv')) {
-            layoutWorker.postMessage({type: 'loadEdgeList', text: content});
+          if (contentType.startsWith("application/json")) {
+            layoutWorker.postMessage({ type: "loadJSON", text: content });
+          } else if (contentType.startsWith("text/csv")) {
+            layoutWorker.postMessage({ type: "loadEdgeList", text: content });
           } else {
-            console.log(`Error: Cannot handle files with content type ${contentType}.`);
+            console.log(
+              `Error: Cannot handle files with content type ${contentType}.`
+            );
           }
         });
     }
 
     layoutWorker.onmessage = e => {
-      if (e.data.type === 'graph') {
+      if (e.data.type === "graph") {
         graph = e.data.graph;
         this.nodeCount = graph.nodes.length;
         this.edgeCount = graph.edges.length;
 
-        const ignoreFields = ['x', 'y', 'vx', 'vy', 'select'];
+        const ignoreFields = ["x", "y", "vx", "vy", "select"];
         this.fields = [];
         graph.nodes.forEach(n => {
           Object.keys(n).forEach(f => {
@@ -234,20 +165,23 @@ export default {
         this.fields.sort();
 
         map.deleteLayer(layer);
-        layer = map.createLayer('feature', {features: ['point', 'line']});
+        layer = map.createLayer("feature", { features: ["point", "line"] });
 
         nodeMap = {};
-        graph.nodes.forEach((n, i) => nodeMap[n.id] = i);
-        lines = layer.createFeature('line').data(graph.edges.map(e => [nodeMap[e.source], nodeMap[e.target]])).style({
-          position: nodeid => graph.nodes[nodeid],
-          width: 1,
-          strokeColor: 'black',
-          strokeOpacity: this.edgeOpacity,
-        });
+        graph.nodes.forEach((n, i) => (nodeMap[n.id] = i));
+        lines = layer
+          .createFeature("line")
+          .data(graph.edges.map(e => [nodeMap[e.source], nodeMap[e.target]]))
+          .style({
+            position: nodeid => graph.nodes[nodeid],
+            width: 1,
+            strokeColor: "black",
+            strokeOpacity: this.edgeOpacity
+          });
         lines.visible(this.showEdges);
         map.draw();
 
-        graph.nodes.forEach(n => n.adj = []);
+        graph.nodes.forEach(n => (n.adj = []));
         graph.edges.forEach(e => {
           const s = graph.nodes[nodeMap[e.source]];
           const t = graph.nodes[nodeMap[e.target]];
@@ -259,16 +193,21 @@ export default {
           }
         });
 
-        points = layer.createFeature('point', {
-          primitiveShape: 'triangle',
-          style: {
-            strokeColor: 'black',
-            fillColor: nodeid => graph.nodes[nodeid].select ? ['yellow', 'red'][graph.nodes[nodeid].select - 1] : 'grey',
-            fillOpacity: 0.5,
-            strokeOpacity: 0.5,
-          },
-          position: nodeid => graph.nodes[nodeid]
-        }).data(Object.keys(graph.nodes));
+        points = layer
+          .createFeature("point", {
+            primitiveShape: "triangle",
+            style: {
+              strokeColor: "black",
+              fillColor: nodeid =>
+                graph.nodes[nodeid].select
+                  ? ["yellow", "red"][graph.nodes[nodeid].select - 1]
+                  : "grey",
+              fillOpacity: 0.5,
+              strokeOpacity: 0.5
+            },
+            position: nodeid => graph.nodes[nodeid]
+          })
+          .data(Object.keys(graph.nodes));
 
         this.updateSizeScale();
 
@@ -280,65 +219,63 @@ export default {
         map.draw();
 
         points
-          .geoOn(geo.event.feature.mouseon, (evt) => {
+          .geoOn(geo.event.feature.mouseon, evt => {
             const nodeid = evt.data;
             const node = graph.nodes[nodeid];
             tooltip.position(evt.mouse.geo);
             let description = `<div><b>${node.id}</b></div>`;
             this.fields.forEach(key => {
-              if (key !== 'id') {
+              if (key !== "id") {
                 description += `<div>${key}: ${node[key]}</div>`;
               }
-            })
+            });
             tooltipElem.innerHTML = description;
-            tooltipElem.classList.toggle('hidden', false);
-            node.adj.forEach(n => n.select = 1);
+            tooltipElem.classList.toggle("hidden", false);
+            node.adj.forEach(n => (n.select = 1));
             node.select = 2;
             points.modified();
             map.draw();
           })
-          .geoOn(geo.event.feature.mousemove, function (evt) {
+          .geoOn(geo.event.feature.mousemove, function(evt) {
             tooltip.position(evt.mouse.geo);
           })
-          .geoOn(geo.event.feature.mouseoff, function (evt) {
-            tooltipElem.classList.toggle('hidden', true);
-            graph.nodes.forEach(n => n.select = 0);
+          .geoOn(geo.event.feature.mouseoff, function(evt) {
+            tooltipElem.classList.toggle("hidden", true);
+            graph.nodes.forEach(n => (n.select = 0));
             points.modified();
             map.draw();
           });
-      }
-      else if (e.data.type === 'positions') {
+      } else if (e.data.type === "positions") {
         positions = e.data.nodes;
         points.position(nodeid => positions[nodeid]);
         map.draw();
-      }
-      else if (e.data.type === 'alpha') {
+      } else if (e.data.type === "alpha") {
         this.alphaFromWorker = true;
         this.alpha = e.data.value;
-        this.$nextTick(() => this.alphaFromWorker = false);
+        this.$nextTick(() => (this.alphaFromWorker = false));
       }
-    }
+    };
 
     // Add watchers which sync data to layout worker
     [
-      'chargeStrength',
-      'theta',
-      'collideStrength',
-      'linkStrength',
-      'center',
-      'xField',
-      'xStrength',
-      'yField',
-      'yStrength',
-      'radialField',
-      'radialStrength',
+      "chargeStrength",
+      "theta",
+      "collideStrength",
+      "linkStrength",
+      "center",
+      "xField",
+      "xStrength",
+      "yField",
+      "yStrength",
+      "radialField",
+      "radialStrength"
     ].forEach(name => {
       function sendToWorker(value) {
-        layoutWorker.postMessage({type: name, value});
+        layoutWorker.postMessage({ type: name, value });
       }
       this.$watch(name, {
         handler: sendToWorker,
-        immediate: true,
+        immediate: true
       });
     });
   },
@@ -354,7 +291,7 @@ export default {
     },
     edgeOpacity(value) {
       if (lines) {
-        lines.style('strokeOpacity', value);
+        lines.style("strokeOpacity", value);
         lines.modified();
         map.draw();
       }
@@ -362,56 +299,63 @@ export default {
     alpha: {
       handler(value) {
         if (!this.alphaFromWorker) {
-          layoutWorker.postMessage({type: 'alpha', value: value});
+          layoutWorker.postMessage({ type: "alpha", value: value });
         }
       },
-      immediate: true,
+      immediate: true
     },
     size: {
       handler(value) {
-        layoutWorker.postMessage({type: 'size', value});
+        layoutWorker.postMessage({ type: "size", value });
         if (points) {
           this.updateSizeScale();
           map.draw();
         }
       },
-      immediate: true,
+      immediate: true
     },
     sizeField: {
       handler(value) {
-        layoutWorker.postMessage({type: 'sizeField', value});
+        layoutWorker.postMessage({ type: "sizeField", value });
         if (points) {
           this.updateSizeScale();
           map.draw();
         }
       },
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   methods: {
-    upload() {
-      const file = this.$refs.file.files[0];
+    upload(file) {
       if (file) {
         const reader = new FileReader();
-        reader.readAsText(file, 'UTF-8');
-        reader.onload = function (evt) {
-          const extension = file.name.split('.').slice(-1)[0];
-          if (extension === 'json') {
-            layoutWorker.postMessage({type: 'loadJSON', text: evt.target.result});
-          } else if (extension === 'csv') {
-            layoutWorker.postMessage({type: 'loadEdgeList', text: evt.target.result});
+        reader.readAsText(file, "UTF-8");
+        reader.onload = function(evt) {
+          const extension = file.name.split(".").slice(-1)[0];
+          if (extension === "json") {
+            layoutWorker.postMessage({
+              type: "loadJSON",
+              text: evt.target.result
+            });
+          } else if (extension === "csv") {
+            layoutWorker.postMessage({
+              type: "loadEdgeList",
+              text: evt.target.result
+            });
           } else {
-            console.log(`Error: Cannot handle files with extension ${extension}.`);
+            console.log(
+              `Error: Cannot handle files with extension ${extension}.`
+            );
           }
-        }
-        reader.onerror = function (evt) {
-          console.log('Error: ', evt);
-        }
+        };
+        reader.onerror = function(evt) {
+          console.log("Error: ", evt);
+        };
       }
     },
     toggleLayout() {
       this.layoutRunning = !this.layoutRunning;
-      layoutWorker.postMessage({type: 'layout', value: this.layoutRunning});
+      layoutWorker.postMessage({ type: "layout", value: this.layoutRunning });
       if (this.layoutRunning) {
         // Don't draw edges while performing layout for performance reasons
         lines.visible(false);
@@ -426,30 +370,34 @@ export default {
     },
     updateSizeScale() {
       if (points) {
-        const sizeScale = scales.generateSizeScale(graph.nodes, this.sizeField, this.size);
-        points.style('radius', (nodeid) => {
+        const sizeScale = scales.generateSizeScale(
+          graph.nodes,
+          this.sizeField,
+          this.size
+        );
+        points.style("radius", nodeid => {
           return Math.pow(2, map.zoom()) * sizeScale(graph.nodes[nodeid]);
         });
       }
     },
     download() {
-      const nodesWithPositions = graph.nodes.map(({adj, ...n}, i) => ({
+      const nodesWithPositions = graph.nodes.map(({ adj, ...n }, i) => ({
         ...n,
-        ...positions[i],
+        ...positions[i]
       }));
       const saveGraph = {
         nodes: nodesWithPositions,
-        edges: graph.edges,
-      }
+        edges: graph.edges
+      };
       var blob = new Blob([JSON.stringify(saveGraph, null, 2)], {
-        type : 'data:text/json;charset=utf-8;',
+        type: "data:text/json;charset=utf-8;"
       });
-      this.$refs.downloadAnchor.setAttribute('href', URL.createObjectURL(blob));
-      this.$refs.downloadAnchor.setAttribute('download', 'graph.json');
+      this.$refs.downloadAnchor.setAttribute("href", URL.createObjectURL(blob));
+      this.$refs.downloadAnchor.setAttribute("download", "graph.json");
       this.$refs.downloadAnchor.click();
-    },
-  },
-}
+    }
+  }
+};
 </script>
 
 <style>
diff --git a/src/components/AppSlider.vue b/src/components/AppSlider.vue
new file mode 100644
index 0000000..843e323
--- /dev/null
+++ b/src/components/AppSlider.vue
@@ -0,0 +1,42 @@
+<template>
+  <v-slider
+    :value="value"
+    :min="min"
+    :max="max"
+    :step="step"
+    thumb-label
+    :label="label"
+    hide-details
+    :readonly="readOnly"
+    @input="update(arguments[0])"
+  ></v-slider>
+</template>
+<script>
+export default {
+  props: {
+    value: Number,
+    label: String,
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 1
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    update(value) {
+      this.$emit("input", value);
+    }
+  }
+};
+</script>
diff --git a/src/components/FieldBox.vue b/src/components/FieldBox.vue
new file mode 100644
index 0000000..e8d8383
--- /dev/null
+++ b/src/components/FieldBox.vue
@@ -0,0 +1,23 @@
+<template>
+  <v-combobox
+    :value="value"
+    :items="items"
+    :label="label"
+    hide-details
+    @input="update(arguments[0])"
+  ></v-combobox>
+</template>
+<script>
+export default {
+  props: {
+    value: null,
+    items: Array,
+    label: String
+  },
+  methods: {
+    update(value) {
+      this.$emit("input", value);
+    }
+  }
+};
+</script>
diff --git a/src/components/UnderOneSlider.vue b/src/components/UnderOneSlider.vue
new file mode 100644
index 0000000..1f51392
--- /dev/null
+++ b/src/components/UnderOneSlider.vue
@@ -0,0 +1,39 @@
+<template>
+  <app-slider
+    :value="value"
+    :min="min"
+    :max="1.00"
+    :step="0.01"
+    thumb-label
+    :label="label"
+    hide-details
+    :read-only="readOnly"
+    @input="update(arguments[0])"
+  ></app-slider>
+</template>
+<script>
+import AppSlider from "./AppSlider";
+
+export default {
+  components: {
+    AppSlider
+  },
+  props: {
+    value: Number,
+    label: String,
+    min: {
+      type: Number,
+      default: 0
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    update(value) {
+      this.$emit("input", value);
+    }
+  }
+};
+</script>
diff --git a/src/components/Upload.vue b/src/components/Upload.vue
new file mode 100644
index 0000000..1b5b916
--- /dev/null
+++ b/src/components/Upload.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <v-btn block @click="$refs.file.click()">Upload CSV or JSON</v-btn>
+    <input ref="file" type="file" style="display:none" @change="upload" />
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    upload() {
+      this.$emit("file", this.$refs.file.files[0]);
+    }
+  }
+};
+</script>