js image zoom with slider

<div id="app">
  <div class="mycontainer">
    <div class="imgCropZone" style="width: 100px; height: 100px;">
      <img ref="profileHeaderImg" src="https://pbs.twimg.com/profile_banners/2664860815/1548587596/1500x500" alt="" class="ProfileHeaderUploadDialog-cropImage" style="width: 100px; height: 100px; position: relative; top: 0px; left: 0px;">
    </div>
    <input type="range" min="0" max="100" value="0" class="slider" @input="sliding">
  </div>
</div>

.imgCropZone {
  overflow: hidden;
  border: 1px solid #333;
}

.mycontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

new Vue({
  el: "#app",
  methods: {
    sliding(e) {
            const slider_val = e.target.value;
            const base_width = 100;//元々のwidth値
            const base_height = 100;//元々のheight値
            const base_top = -60;//最終的にどのくらいのtop値にしたいか
            const base_left = -61;//最終的にどのくらいのleft値にしたいか
            this.$refs.profileHeaderImg.style.width = base_width + (base_width * 0.01 * slider_val) + 'px';
            this.$refs.profileHeaderImg.style.height = base_height + (base_height * 0.01 * slider_val) + 'px';
            this.$refs.profileHeaderImg.style.top = (base_top * 0.01 * slider_val) + 'px';
            this.$refs.profileHeaderImg.style.left = (base_left * 0.01 * slider_val) + 'px';
        }
  }
})