Нужно что бы при изменении input number изменялось и значение input range

Я добавлю это кастомный реннж и его движение реализованно засчет background-size, мне нужно что бы это значение для ренжа можно было поменять с окошка справа(number), я не знаю как это сделать уже( Вот ссылка на кодпен с моей проблемой,спасибо :3 https://codepen.io/maximyaroschuk/pen/vYppVOE

                    <input class="slider-range-counter" id="rangevalue" type="number" value="200" min="200" step="100" max="50000" oninput="range.value=value">

.slider-range,
.slider-range-counter {
  display: inline-block;
  vertical-align: middle;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
.slider-range-counter {
  width: 85px;
  background: white;
  border: 1px solid $grey-400;
  padding: 6px 0px 6px 12px;
  box-sizing: border-box;
  border-radius: 4px;
}
.slider-range {
  -webkit-appearance: none;
  margin-right: 15px;
  width: 400px;
  height: 7px;
  background: #e9ecef;
  border-radius: 5px;
  background-image: linear-gradient(#367bf5, #367bf5);
  background-size: 2% 100%;
  background-repeat: no-repeat;
}
.slider-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    background: url("../img/slider-dot.svg");
    cursor: grab;
  }
  .slider-range::-webkit-slider-thumb:active {
    cursor: grabbing;
  }

  .slider-range::-moz-range-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    background: url("../img/slider-dot.svg");
    cursor: grab;
  }
  .slider-range::-moz-range-thumb:active {
    cursor: grabbing;
  }

  .slider-range::-ms-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    background: url("../img/slider-dot.svg");
    cursor: grab;
  }
  .slider-range::-ms-thumb:active {
    cursor: grabbing;
  }
.slider-range::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }
.slider-range::-moz-range-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }
.slider-range::-ms-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }
const rangeInputs = document.querySelectorAll('input[type="range"]');

function handleInputChange(e) {
  let target = e.target;
  if (e.target.type !== "range") {
    target = document.getElementById("range");
  }
  const min = target.min;
  const max = target.max;
  const val = target.value;

  target.style.backgroundSize = ((val - min) * 100) / (max - min) + "% 100%";
}

rangeInputs.forEach((input) => {
  input.addEventListener("input", handleInputChange);
});