Получить значение из range меньшего числа. JS

Question

есть блок с 2 input и range

<div class="block">
  <div class="val__block">
    <input type="text" id="i1">
    <input type="text" id="i2">
  </div>
  <span id="min">30</span>
  <input type="range" id="r1" oninput="fun1()" min="30" max="200">
  <span id="max">200</span>
</div>

нужно в левый текстовый input выводить значение меньшего числа, в данном случае это 30. То-есть если ползунок довести до середины будет 100 в правом инпут а в левом должно быть 15

function fun1() {
     var rng = document.getElementById('r1'); 
   var i1 = document.getElementById('i1');
   var min = document.getElementById('min').textContent;
   var max = document.getElementById('max').textContent;;
   var val = rng.value;

     i1.value = val;
   var full = max - min; //100%
   var left = max - val;
   var summ = left * 100 / full; //процент
   var data = min / 100 * summ;
   i1.value = data;
   i2.value = val;
}

Вот так если делать, получаю изначально 0 а в конце 30 и если довести до середины у левого инпута будет 17.64705882352941 вместо 15, тут математически скорее всего не верно что то подставил, заранее спасибо за ответ

Answer 1

я не совсем понял логику - у вас есть ползунок между min и max, а вот что в left и rigth должно происходить? right должен меняться от 30 до 200, а left от 0 до 30?

у вас используется какая-то дикая формула -

// дикая формула
//  var data = min * (max - val) / (max - min);

что она символизировать должна?

вот вам код, который даёт в зависимости от ползунка правому input значение от 30 (min) до 200 (max), а левому - от 0 до 30

и кстати раз уж добавили атрибуты к ползунку, так и используйте эти атрибуты, а не получайте данные из текстовых блоков - это некрасиво

function fun1() {
  let rng = document.querySelector('#r1'); 
  var i1 = document.querySelector('#i1');

  const min = rng.getAttribute('min');
  const max = rng.getAttribute('max');
  const full = max - min;

  const val = rng.value;
  const pos = (val - min) / (max - min);

  const left = min * pos;
  const right = max * pos;

  i1.value = Math.round(left);
  i2.value = Math.round(right);
}

<div class="block">
  <div class="val__block">
    <input type="text" id="i1">
    <input type="text" id="i2">
  </div>
  <span>30</span>
  <input type="range" id="r1" oninput="fun1()" min="30" max="200">
  <span>200</span>
</div>

БЛОГ НА HUSL

Получить значение из range меньшего числа. JS

Ответы (1 шт):