Zoom uploaded image on input range in ASP.NET Webforms

Question

I have a problem with zooming an uploaded image in ASP.NET Webforms. In my project I need to upload an image, preview it and be able to zoom it on input range. Here is my code, but it won't work. It says it can't read values from null. Also I will need the values, because the zoomed image needs to be written in database. Does anyone have a clue how can I solve it? Thanks in advance.

   <script type="text/javascript">
    function ShowImagePreview(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#<%=imagePreview.ClientID%>').prop('src', e.target.result)
                    .width(240)
                    .height(150);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    var zoomer = document.getElementById('zoomer');
    var imagePreview = document.getElementById('imagePreview');

    function deepdive(){ 
       zoomlevel = zoomer.valueAsNumber;
       imagePreview.style.webkitTransform = "scale("+zoomlevel+")";
       imagePreview.style.transform = "scale("+zoomlevel+")";
    }
</script>

<asp:FileUpload ID="uploadImage" runat="server" onchange="ShowImagePreview(this)"
<div class="imageContainer">
   <asp:Image ID="imagePreview" Height="250px" Width="250px" runat="server"/>
</div>
<input id="zoomer" type="range" min="1" max="100" value="1" class="sliderZoom" oninput="deepdive()" >

and in my css

#imageContainer {
  width: 50%;
  font-size: 0;
  border: 1px solid #111;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 2rem;
}

#imagePreview {
  width: 100%;
}

#zoomer {
  display: block;
  width: 50%;
  margin: 2rem auto;
}

Answer 1

I solved the problem was in the tag asp:Image, instead of that it works with a simple img tag.