JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<input id="test" min="1" max="10" value='10' step="1" onclick="showVal(this.value)" type="range"/>
<div class="container">

</div>


<script>
			function setZoom(zoom,el) {
      
      transformOrigin = [0,0];
	    el = el || instance.getContainer();
	    var p = ["webkit", "moz", "ms", "o"],
            s = "scale(" + zoom + ")",
            oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";

	    for (var i = 0; i < p.length; i++) {
	        el.style[p[i] + "Transform"] = s;
	        el.style[p[i] + "TransformOrigin"] = oString;
	    }

	    el.style["transform"] = s;
	    el.style["transformOrigin"] = oString;
      
}

//setZoom(5,document.getElementsByClassName('container')[0]);

function showVal(a){
   var zoomScale = Number(a)/10;
   setZoom(zoomScale,document.getElementsByClassName('container')[0])
}


</script>

CSS

.container{
  width:500px;
  height:500px;
  background:blue;
}