diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js
index c48cb2c4b2..e200efe1fa 100644
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/client/app/scripts/charts/nodes-chart.js
@@ -64,8 +64,6 @@ class NodesChart extends React.Component {
 function mapStateToProps(state) {
   return {
     selectedNodeId: state.get('selectedNodeId'),
-    layoutZoomState: graphZoomStateSelector(state),
-    layoutZoomLimits: graphZoomLimitsSelector(state),
   };
 }
 
diff --git a/client/app/scripts/components/zoom-control.js b/client/app/scripts/components/zoom-control.js
new file mode 100644
index 0000000000..15ec166a34
--- /dev/null
+++ b/client/app/scripts/components/zoom-control.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import Slider from 'rc-slider';
+import { scaleLog } from 'd3-scale';
+
+
+const CLICK_STEP = 0.05;
+const SLIDER_STEP = 0.001;
+
+const valueFromZoomScale = (props) => {
+  const { scale, minScale, maxScale } = props;
+  const value = scaleLog()
+    .domain([minScale, maxScale])
+    .range([0, 1])(scale);
+  // const value = Math.log(scale / minScale) /
+  //               Math.log(maxScale / minScale);
+  // return isNaN(value) ? 0 : value;
+  return value;
+};
+
+export default class ZoomControl extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = { value: valueFromZoomScale(props) };
+
+    this.handleZoomOut = this.handleZoomOut.bind(this);
+    this.handleZoomIn = this.handleZoomIn.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({ value: valueFromZoomScale(nextProps)});
+  }
+
+  updateValue(value) {
+    const { minScale, maxScale, slideAction } = this.props;
+    slideAction(Math.exp(value * Math.log(maxScale / minScale)) * minScale);
+  }
+
+  handleZoomOut() {
+    this.updateValue(Math.max(0, this.state.value - CLICK_STEP));
+  }
+
+  handleZoomIn() {
+    this.updateValue(Math.min(1, this.state.value + CLICK_STEP));
+  }
+
+  render() {
+    const { value } = this.state;
+
+    return (
+      <div className="zoom-control-wrapper">
+        <span className="zoom-control">
+          <a className="zoom-in" onClick={this.handleZoomIn}><span className="fa fa-plus" /></a>
+          <Slider value={value} max={1} step={SLIDER_STEP} vertical onChange={this.updateValue} />
+          <a className="zoom-out" onClick={this.handleZoomOut}><span className="fa fa-minus" /></a>
+        </span>
+      </div>
+    );
+  }
+}
diff --git a/client/app/scripts/components/zoom-indicator.js b/client/app/scripts/components/zoom-indicator.js
deleted file mode 100644
index a99ed2a8e3..0000000000
--- a/client/app/scripts/components/zoom-indicator.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import Slider from 'rc-slider';
-
-
-export default class ZoomIndicator extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleZoomOut = this.handleZoomOut.bind(this);
-    this.handleZoomIn = this.handleZoomIn.bind(this);
-  }
-
-  handleChange(value) {
-    this.props.slideAction(Math.exp(value) * this.props.minScale);
-  }
-
-  handleZoomOut() {
-    const newValue = Math.max(0, this.value - (0.05 * this.max));
-    this.props.slideAction(Math.exp(newValue) * this.props.minScale);
-  }
-
-  handleZoomIn() {
-    const newValue = Math.min(this.max, this.value + (0.05 * this.max));
-    this.props.slideAction(Math.exp(newValue) * this.props.minScale);
-  }
-
-  render() {
-    const { minScale, maxScale, scale } = this.props;
-    const max = Math.log(maxScale / minScale);
-    const value = Math.log(scale / minScale);
-    this.value = value;
-    this.max = max;
-
-    return (
-      <div className="zoom-indicator-wrapper">
-        <span className="zoom-indicator">
-          <a className="zoom-in" onClick={this.handleZoomIn}><span className="fa fa-plus" /></a>
-          <Slider max={max} value={value} vertical step={0.001} onChange={this.handleChange} />
-          <a className="zoom-out" onClick={this.handleZoomOut}><span className="fa fa-minus" /></a>
-        </span>
-      </div>
-    );
-  }
-}
diff --git a/client/app/scripts/components/zoomable-canvas.js b/client/app/scripts/components/zoomable-canvas.js
index b39e2f3375..e5cd2961de 100644
--- a/client/app/scripts/components/zoomable-canvas.js
+++ b/client/app/scripts/components/zoomable-canvas.js
@@ -7,7 +7,7 @@ import { event as d3Event, select } from 'd3-selection';
 import { zoom, zoomIdentity } from 'd3-zoom';
 
 import Logo from '../components/logo';
-import ZoomIndicator from '../components/zoom-indicator';
+import ZoomControl from '../components/zoom-control';
 import { cacheZoomState } from '../actions/app-actions';
 import { transformToString } from '../utils/transform-utils';
 import { activeTopologyZoomCacheKeyPathSelector } from '../selectors/zooming';
@@ -109,7 +109,7 @@ class ZoomableCanvas extends React.Component {
             {forwardTransform ? children(this.state) : children}
           </g>
         </svg>
-        {this.canChangeZoom() && <ZoomIndicator
+        {this.canChangeZoom() && <ZoomControl
           slideAction={this.handleSlide}
           minScale={this.state.minScale}
           maxScale={this.state.maxScale}
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 08728b337e..99a17f972b 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -1753,7 +1753,7 @@
 // Zoom indicator
 //
 
-.zoom-indicator-wrapper {
+.zoom-control-wrapper {
   color: $text-tertiary-color;
   padding: 5px 10px;
   border-radius: 5px;
@@ -1768,7 +1768,7 @@
   padding: 10px 0 5px;
   opacity: 0.9;
 
-  .zoom-indicator {
+  .zoom-control {
     display: flex;
     align-items: center;
     flex-direction: column;