Zoom on scroll wheel.

src/App.js

@@ -56,6 +56,16 @@ class App extends React.Component {
         }
         this.setState({isZoomed: true});
       };
+      const mouseScroll = (e) => {
+        let delta = parseFloat(-e.deltaY/100.0);
+        let zoomFactor = delta + this.state.zoomFactor;
+        if (zoomFactor < 1) { zoomFactor = 1; }
+        if (zoomFactor > 24) { zoomFactor = 24; }
+        this.setState({
+          zoomFactor: zoomFactor,
+          isZoomed: true
+        });
+      };
       const mouseLeave = (e) => {
         if (isFrozen) {
           return;
@@ -86,6 +96,7 @@ class App extends React.Component {
             onMouseMove={mouseMove}
             onMouseEnter={mouseEnter}
             onMouseLeave={mouseLeave}
+            onWheel={mouseScroll}
             className="frame"
              style={{backgroundImage: 'url("' + url + '")', ...style}}>
             <p>{name}</p>
@@ -101,12 +112,12 @@ class App extends React.Component {
             <input
               id="zoom"
               type="range"
-              min="1" max="64"
+              min="1" max="24"
               value={zoomFactor}
               onChange={(e) => this.setState({
-                zoomFactor: e.target.value
+                zoomFactor: Number(e.target.value)
               })}
-              step="1"/>
+              step="0.1"/>
           </label>
           {zoomFactor}
         </div>