<div class="hero">
  <h1 class="liquify">Liquify</h1>
  <input type="range" min="-300" max="300" value="35" oninput="updateLiquify(this.value);" onchange="updateLiquify(this.value);" />
</div>


<svg id="svgeffects">
  <defs>
    <filter class="safari_only" id="liquify">
      <feTurbulence baseFrequency="0.015" numOctaves="3" result="warp" type="fractalNoise"></feTurbulence>
      <feDisplacementMap id="liquid" in="SourceGraphic" in2="warp" scale="35" xChannelSelector="R" yChannelSelector="B"></feDisplacementMap>
    </filter>
  </defs>
</svg>

.hero {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Georgia';
  font-size: 5vw;
  font-weight: 400;
  letter-spacing: -0.1em;
}

.liquify {
  filter: url("#liquify");
}

input[type="range"] {
  display: block;
  margin-top: 2vw; 
  cursor: pointer;
}

var updateLiquify = function(val) {
  document.getElementById('liquid').setAttribute('scale', val);
};