<div class="row">
  <form class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <input placeholder="Min Size" id="minSize" type="number" class="validate">
        <label for="minSize">Min Size</label>
      </div>
      <div class="input-field col s6">
        <input placeholder="Max Size" id="maxSize" type="number" class="validate">
        <label for="maxSize">Max Size</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s6">
        <input placeholder="Min Screen" id="minScreen" type="number" class="validate">
        <label for="minScreen">Min Screen</label>
      </div>
      <div class="input-field col s6">
        <input placeholder="Max Screen" id="maxScreen" type="number" class="validate">
        <label for="maxScreen">Max Screen</label>
      </div>
      <div class="input-field col s12">
        <button id="calculate" class="btn waves-effect waves-light" type="button">Calculate
          <i class="material-icons right">send</i>
        </button>
      </div>
    </div>
  </form>
</div>

<div class="row">
  <div class="col s12">
    <div id="result"><div>
  </div>
</div>
const calculate = document.querySelector('#calculate')
const result = document.querySelector('#result')

calculate.addEventListener('click', () => {
  let minSize = +document.querySelector('#minSize').value
  let maxSize = +document.querySelector('#maxSize').value
  let minScreen = +document.querySelector('#minScreen').value
  let maxScreen = +document.querySelector('#maxScreen').value

  let a = (maxSize - minSize) / (maxScreen - minScreen)
  let b = minSize - ( a * minScreen )
  
  let sign =  "+";
  if (b < 0) {
    sign = "-";
    b = Math.abs(b);
  }

  result.innerHTML = `clamp(${minSize}px, calc(${a*100}vw ${sign} ${b}px), ${maxSize}px)`
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js