Fixes #88

src/components/draggable.js

@@ -66,7 +66,7 @@ class Draggable extends PureComponent {
   drag = createDragHandler({
     handleDrag: this.handleDrag,
     handleDragStop: this.handleDragStop
-  })
+  }, this.props.isTracking)
 
   clear() {
     if (this.delay) clearTimeout(this.delay)
@@ -88,6 +88,7 @@ class Draggable extends PureComponent {
     className: string,
     delay: number.isRequired,
     isDisabled: bool,
+    isTracking: bool,
     style: object,
     tabIndex: number,
     onClick: func.isRequired,
@@ -98,6 +99,7 @@ class Draggable extends PureComponent {
 
   static defaultProps = {
     delay: 250,
+    isTracking: false,
     onClick: noop,
     onDrag: noop,
     onDragStop: noop

src/components/esper/toolbar.js

@@ -138,6 +138,7 @@ class EsperToolbar extends React.PureComponent {
               precision={this.props.zoomPrecision}
               resolution={this.props.resolution * 100}
               showCurrentValue
+              isTracking
               steps={this.props.zoomSteps}
               minIcon={<IconMinusCircle/>}
               maxIcon={<IconPlusCircle/>}

src/components/project/toolbar.js

@@ -23,6 +23,7 @@ const ProjectToolbar = (props) => (
           value={props.zoom}
           max={props.maxZoom}
           isDisabled={props.isDisabled || props.count === 0}
+          isTracking
           onChange={props.onZoomChange}
           minIcon={<IconList/>}
           maxIcon={<IconGrid/>}

src/components/slider.js

@@ -222,6 +222,7 @@ class Slider extends React.PureComponent {
         <Draggable
           delay={15}
           isDisabled={isDisabled}
+          isTracking={this.props.isTracking}
           onDrag={this.handleDrag}
           onDragStart={this.handleDragStart}>
           <div ref={this.track} className="slider-track">
@@ -240,6 +241,7 @@ class Slider extends React.PureComponent {
 
   static propTypes = {
     isDisabled: bool,
+    isTracking: bool,
     keymap: instanceOf(KeyMap).isRequired,
     max: number.isRequired,
     maxIcon: element,
@@ -259,6 +261,7 @@ class Slider extends React.PureComponent {
   }
 
   static defaultProps = {
+    isTracking: false,
     min: 0,
     max: 1,
     precision: 1,

src/dom.js

@@ -176,7 +176,7 @@ const dom = {
     return node.tagName === 'A' && !blank(node.href)
   },
 
-  createDragHandler({ handleDrag, handleDragStop }) {
+  createDragHandler({ handleDrag, handleDragStop }, isTracking = false) {
     function onKeyDown(event) {
       switch (event.key) {
         case 'Escape':
@@ -189,9 +189,17 @@ const dom = {
     function onDragStart() {
       dom.on(document, 'mousemove', handleDrag)
       dom.on(document, 'mouseup', onDragStop, { capture: true })
-      dom.on(document, 'mouseleave', onDragStop)
       dom.on(window, 'blur', onDragStop)
 
+      if (isTracking) {
+        dom.on(document.body, 'mouseleave', onDragStop)
+        dom.on(document, 'mousemove', (e) => {
+          if (e.buttons === 0) {
+            onDragStop()
+          }
+        })
+      }
+
       // Register on body because global bindings are bound
       // on document and we need to stop the propagation in
       // case we handle it here!