<label for="x1">
  <input type="range" id="x1" min="0" step="0.1" max="100" value="50" style="width: 400px"> x1 <span>50%</span>
</label>
<label for="y1">
  <input type="range" id="y1" min="0" step="0.1" max="100" value="50" style="width: 400px"> y1 <span>50%</span>
</label>
<label for="x2">
  <input type="range" id="x2" min="0" step="0.1" max="100" value="50" style="width: 400px"> x2 <span>50%</span>
</label>
<label for="y2">
  <input type="range" id="y2" min="0" step="0.1" max="100" value="50" style="width: 400px"> y2 <span>50%</span>
</label>
<div class="box">

  <svg viewBox="0 0 600 200">
    <linearGradient id="grad" x1="0" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="crimson"/>
      <stop offset="50%" stop-color="gold"/>
      <stop offset="100%" stop-color="teal"/>
    </linearGradient>

    <rect fill="url(#grad)"
          width="100%" height="100%"/>
  </svg>
</div>

  .box {
      padding: 20px;
    }

    label {
      display: inline-block;
      margin:20px;
    }
    label span{
      color:red;
    }

 let x1 = document.querySelector('#x1');
  let y1 = document.querySelector('#y1');
  let x2 = document.querySelector('#x2');
  let y2 = document.querySelector('#y2');
  let grad = document.querySelector('#grad');
  let obj = {
    x1, x2, y1, y2
  }
  let keyArr = Object.keys(obj);
  let valueArr = Object.values(obj);
  const slect = x => document.querySelector(x);

  valueArr.forEach((val, i) => val.addEventListener('input', e => {
    let target = e.target.value;
    slect(`label[for=${keyArr[i]}] span`).textContent=target + '%'
    grad.setAttribute(keyArr[i], target + '%')
  }))