根据输入的第一个要求设置输入类型范围的最小值

Question

我有两个输入类型范围，第一个输入的最小值设置为0。 我想根据第一个输入为第二个输入类型范围设置最小值。

 <input name="notification_interval" id="notif" type="range" min="0" max="24" value="{{$teamInfo->notification_interval}}"  onchange="notifValue.value=value">
 <output id="notifValue">{{$teamInfo->notification_interval}}</ouput>

<input name="limit_per_shift" id="maxshift" type="range" min="0" max="24" value="{{$teamInfo->limit_per_shift}}"  onchange="maxValue.value=value">
 <output id="maxValue">{{$teamInfo->limit_per_shift}}</ouput>

像第一个输入一样，我选择2作为值。 我希望下一个输入的最小值为3。

谢谢

Answer 1

的HTML

<input type="number" class="first" min="0">
<input type="number" class="second" min="0">

jQuery的

$(document).ready(function(){
  $('.first').keyup(function(){
    var a = $(this).val();
    $('.second').attr('min',a);
  });
});

Answer 2

在第一个输入的操作中，获取输入的数值并更改第二个输入的min 。 这是纯JavaScript的示例：

function onFirstInput() {
    var input1 = document.getElementById("firstInput").value;
    var newMin = Number(input1)
    //Insert any other statements that process the new min here
    document.getElementById("secondInput").min = newMin;
}

Answer 3

侦听第一个范围输入上的“ change”事件，并运行一个将第二个输入的最小值设置为第一个范围输入的当前值加1的函数。获取元素的值将返回一个字符串，因此parseInt()需要将parseInt()转换为数字，以便可以将其添加为1。

var range_1 = document.getElementById('range_1');
var range_2 = document.getElementById('range_2');

range_1.addEventListener('change', function(){
  range_2.min = parseInt(range_1.value) + 1;
});