Как исправить JavaScript, не назначая правильные значения?

Question

Я пытаюсь сохранить последнее выбранное значение, которое было меньше maxrange.value, и использовать его для изменения значения ползунка, когда оно не соответствует истине.Когда первое значение изменяется на больше, чем второе, я хочу, чтобы оно вернулось к последнему значению, которое было ниже второго.

    <input id="slider-min" type="range" value="14" min="1" max="20" step="1" oninput="checkifvaluemin()"/>
    <input id="slider-max" type="range" value="16" min="1" max="20" step="1" oninput="checkifvaluemax()"/>

      var minrange = document.getElementById("slider-min");
      var maxrange = document.getElementById("slider-max");
        function checkifvaluemin() {
          if (minrange.value < maxrange.value) {
            var lastvaluemin = minrange.value;
            minrange.value = lastvaluemin;
          }
        }
        function checkifvaluemax() {
          if (minrange.value > maxrange.value) {
            var lastvaluemax = maxrange.value;
            maxrange.value = lastvaluemax;
        }
}

lastvaluemin пропускает числа 2-9

Answer 1

Я не уверен на 100% по описанию, предоставленному OP, поэтому я обрисую в общих чертах то, что Я думаю, что вопрос OP.

1. Свойство минимального ввода диапазона min всегда меньше, чем свойство min ввода максимального диапазона.

2. Свойство ввода максимального диапазона max всегда больше, чем свойство max ввода минимального диапазона.

Чтобы создать это поведение, мы можем использовать атрибут oninput для настройки свойств min/max. Значения отображаются тегами <output>.

<form>

oninput=
// min range max property is at least 1 less than max range max property 
minIN.max = maxIN.valueAsNumber-1,
// max range min property is at least 1 more than min range min property
maxIN.min = minIN.valueAsNumber+1,
// displays the difference between min and max
minMax.value = maxIN.valueAsNumber - minIN.valueAsNumber

<input type="range">

oninput=
// The <output> of min and max ranges are synced to react when either one gets user input
// A poor man's two-way data-binding   
minOUT.value = this.value, 
maxOUT.value = maxIN.value
...
maxOUT.value = this.value, 
minOUT.value = minIN.value

:root {
  font: 400 16px/1.2 Consolas;
}

label,
input,
output {
  display: inline-block;
  font: inherit;
  height: 1.5rem;
  line-height: 1.5rem;
  vertical-align: middle;
}

[type=range] {
  width: 28.5vw;
}

label b {
  display: inline-block;
  width: 15vw;
}

.max {
  text-align: right;
}

.minMax {
  transform: translateY(100%);
  text-align: center; 
}

<form id='ui' oninput='minIN.max = maxIN.valueAsNumber-1, maxIN.min = minIN.valueAsNumber+1, minMax.value = maxIN.valueAsNumber - minIN.valueAsNumber'>

  <label class='min' for='minIN'><b>MIN:
  <output id='minOUT' for='minIN'>14</output></b><br>
  
  <input id="minIN" type="range" value="14" min="1" max="19" step="1" oninput="minOUT.value = this.value, maxOUT.value = maxIN.value">
</label>

  <label class='minMax' for='minMax'><b>SIZE:
<output id='minMax' for='maxIN minIN'>2</output></b>
</label>

  <label class='max' for='maxIN'><b>MAX:
  <output id='maxOUT' for='maxIN'>16</output></b><br>
  
  <input id="maxIN" type="range" value="16" min="2" max="20" step="1" oninput="maxOUT.value = this.value, minOUT.value = minIN.value">
</label>

</form>

Answer 2

Это должно хотеть вас, если я понимаю ваше требование.

Что я изменил:

• Добавлено много журналов, чтобы мы могли видеть, что происходит.
• Записал значения min / max как JSON, чтобы мы могли определить, являются ли они строками или числами.
• Преобразовал значения min / max в целые числа, используя parseInt, чтобы результаты сравнения имели смысл.
• Условие вашего первого if заявления не имело для меня смысла, поэтому я изменил его.

• Внутри обоих операторов if вы присваивали текущее значение ползунка себе. Это никогда не даст эффекта. Я изменил его так, чтобы ползунку было присвоено значение другого ползунка, что позволяет им ограничивать друг друга.

  <input id="slider-min" type="range" value="14" min="1" max="20" step="1" oninput="checkifvaluemin()"/>
  <input id="slider-max" type="range" value="16" min="1" max="20" step="1" oninput="checkifvaluemax()"/>
  
  <script>
      const minrange = document.getElementById("slider-min");
      const maxrange = document.getElementById("slider-max");
  
      function checkifvaluemin() {
  
          const min = parseInt(minrange.value);
          const max = parseInt(maxrange.value);
  
          console.log('min', JSON.stringify(min));
          console.log('max', JSON.stringify(max));
  
          if (min > max) {
  
              console.log('Checkifvaluemin min > max. Changing.');
  
              minrange.value = max;
  
          } else {
  
              console.log('Checkifvaluemin min <= max. Doing nothing.');
          }
      }
  
      function checkifvaluemax() {
  
          const min = parseInt(minrange.value);
          const max = parseInt(maxrange.value);
  
          console.log('min', JSON.stringify(min));
          console.log('max', JSON.stringify(max));
  
          if (min > max) {
  
              console.log('Checkifvaluemax min > max. Changing.');
  
              maxrange.value = min;
  
          } else {
  
              console.log('Checkifvaluemax min <= max. Doing nothing.');
          }
      }
  </script>