CODEWITHSUNDEEP
javascriptjqueryhtml
Jorge123
Jorge123

Reputation: 11

Set min value for input type range depending on first asked input

I have two input type range with min value set to 0 on the first input. I wanted to set min value for the second input type range based on the first input.

 <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>

Like for the first input i select 2 as value. I wanted to have the next input to have a min value of 3.

thanks

Upvotes: 0

Views: 2401

Answers (3)

huntermacd
huntermacd

Reputation: 77

Listen for the 'change' event on the first range input and run a function that sets the min value of the second input to the current value of the first range input plus 1. Fetching the value of an element returns a string, so the parseInt() is needed to convert to a number so the 1 can be added to it.

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;
});

Upvotes: 0

BradzTech
BradzTech

Reputation: 2835

In the action for the first input, get the input's numeric value and change the min value of the second input. Here's an example in pure 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;
}

Upvotes: 0

Deepak saini
Deepak saini

Reputation: 4270

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);
  });
});

Upvotes: 1

Related Questions