diff --git a/src/octoprint/static/js/app/viewmodels/control.js b/src/octoprint/static/js/app/viewmodels/control.js
index a76eb9f4..56d58ca3 100644
--- a/src/octoprint/static/js/app/viewmodels/control.js
+++ b/src/octoprint/static/js/app/viewmodels/control.js
@@ -23,6 +23,9 @@ $(function() {
         self.extrusionAmount = ko.observable(undefined);
         self.controls = ko.observableArray([]);
 
+        self.distances = ko.observableArray([0.1, 1, 10, 100]);
+        self.distance = ko.observable(10);
+
         self.tools = ko.observableArray([]);
 
         self.feedRate = ko.observable(100);
@@ -245,7 +248,7 @@ $(function() {
 
         self.sendJogCommand = function (axis, multiplier, distance) {
             if (typeof distance === "undefined")
-                distance = $('#jog_distance button.active').data('distance');
+                distance = self.distance();
             if (self.settings.printerProfiles.currentProfileData() && self.settings.printerProfiles.currentProfileData()["axes"] && self.settings.printerProfiles.currentProfileData()["axes"][axis] && self.settings.printerProfiles.currentProfileData()["axes"][axis]["inverted"]()) {
                 multiplier *= -1;
             }
@@ -521,6 +524,10 @@ $(function() {
             }
         };
 
+        self.stripDistanceDecimal = function(distance) {
+            return distance.toString().replace(".", "");
+        };
+
     }
 
     OCTOPRINT_VIEWMODELS.push([
diff --git a/src/octoprint/templates/tabs/control.jinja2 b/src/octoprint/templates/tabs/control.jinja2
index 32fdd292..93d6e524 100644
--- a/src/octoprint/templates/tabs/control.jinja2
+++ b/src/octoprint/templates/tabs/control.jinja2
@@ -55,12 +55,11 @@
     </div>
 
     <!-- Jog distance -->
-    <div id="control-jog-distance" class="distance">
-        <div id="jog_distance" class="btn-group" data-toggle="buttons-radio">
-            <button type="button" id="control-distance01" class="btn distance" data-distance="0.1" data-bind="enable: loginState.isUser()">0.1</button>
-            <button type="button" id="control-distance1" class="btn distance" data-distance="1" data-bind="enable: loginState.isUser()">1</button>
-            <button type="button" id="control-distance10" class="btn distance active" data-distance="10" data-bind="enable: loginState.isUser()">10</button>
-            <button type="button" id="control-distance100" class="btn distance" data-distance="100" data-bind="enable: loginState.isUser()">100</button>
+    <div class="distance">
+        <div class="btn-group" data-toggle="buttons-radio" id="jog_distance">
+            <!-- ko foreach: distances -->
+            <button type="button" class="btn distance" data-bind="enable: $root.loginState.isUser(), text: $data, click: function() { $root.distance($data) }, css: { active: $root.distance() === $data }, attr: { id: 'control-distance' + $root.stripDistanceDecimal($data) }"></button>
+            <!-- /ko -->
         </div>
     </div>