Scale Image with Slider

Simple image scale with HTML5 input slider.

by scurrilus

HTML

<img id="image" src="https://dummyimage.com/1200x800/cc0000/fff" />
<div class="slider-interface">
<input id="slider" type="range" oninput="scaleFunction()" min="100" max="200" value="100">
<p id="range-output"></p>
</div>

CSS

img {
  width: 300px;
}

.slider-interface {
  clear: both;
  position: fixed;
  top: 1rem;
  right: 1rem;
}

JavaScript

function scaleFunction() {
    var x = document.getElementById("slider").value;
    document.getElementById("range-output").innerHTML = "You wrote: " + x / 100;
    document.getElementById("image").style.transform = "scale(" + x / 100 + ")";
}