JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d5c432a5205c6444649b2e99da17644bf0e128a6.googledrive.com/host/0B6CpQrrV0mgEV0NpTGdUN3VQZTg"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<!-- ********* DEFAULT JQUERY MOBILE PAGE **************** -->
<div data-role="page" id="splash" data-theme="f">
    <div data-role="content">
        <p>Here's a stripped-down example based on the sample CropIt code on GitHub. The long URL in the external resources list is a "locally" hosted version of Cropit.min.js on Google Drive. Everything else works, including the imageState tag, the drag-to-pan on the image, the image upload and export. Only the zoom slider doesn't work.</p>
<a href="#upload" data-role="button" data-theme="b">Example: CropIt is the second jQm page</a>

        <p>If I switch the order of the jQuery Mobile pages, so that the Cropit page is the first (default) page of the HTML instead of this page, the zoom works fine: <a href="http://jsfiddle.net/jLqjvzdu/1" data-role="button" data-theme="b" target="_blank">Example: Cropit is the first jQm page.</a></p> 

    </div>
</div>
<!-- ******** UPLOAD PAGE ******* -->
<div data-role="page" id="upload" data-close-btn="none">
    <div data-role="content" style="padding:0px">
        <!-- content -->
        <div class="image-editor">
            <input type="file" class="cropit-image-input">
            <div class="cropit-image-preview"></div>
            <div class="image-size-label">Resize image</div>
            <input type="range" class="cropit-image-zoom-input">
            <button class="export">Export</button>
        </div>
    </div>
</div>

CSS

.cropit-image-preview {
          background-color: #f8f8f8;
          background-size: cover;
          border: 1px solid #ccc;
          border-radius: 3px;
          margin-top: 7px;
          width: 250px;
          height: 250px;
          cursor: move;
      }
      .cropit-image-background {
          opacity: .2;
          cursor: auto;
      }
      .image-size-label {
          margin-top: 10px;
      }
      input {
          display: block;
      }
      .export {
          margin-top: 10px;
      }

JavaScript

$(function () {
          $('.image-editor').cropit({
              imageState: {
                  src: 'http://lorempixel.com/500/400/'
              }
          });

          $('.export').click(function () {
              var imageData = $('.image-editor').cropit('export');
              window.open(imageData);
          });
      });