Limit a "range" using another "range"

Asked

Viewed 100 times

0

Hello, I’m developing a web page, and I’m needing to limit a range by making use of another range.

I have two <input type='range' /> Both go from 0 to 10. I need that when one is changed to the value 5 the other receives a total value of 5.

jquery html

  • Can you tell us what your HTML code is and what the semantic relationship is between the two fields? One crease will set the maximum value of the other?

  • 1

    Could you explain better what you are trying to do? What range are you trying to limit what it is? Is it something CSS? Is it some calculation with Javascript? It’s something with Java?

  • I have 2 two "range" the two go from 0 to 10, but I need that when one is at 5 the other was limited to a maximum 5. Both are in html with the following line of code:

  • <input type="range" min="-60" max="10" value="0" style="width:120px;bottom:-50%;top:60%;height: 5px; left: -7%" oninput="display.value=value" onchange="display.value=value" list="tickmarks">

1 answer

1


Good using your comment

I have 2 two "range" the two go from 0 to 10, but I need that when one is in 5 the other was limited to a maximum of 5

I developed an answer that uses Jquery and satisfies your question.

$('.slider1').on('input', function(){
	$('.range1').html($('.slider1').val());
	$('.slider2').attr('max', $('.slider1').val());
});
$('.slider2').on('input', function(){
  $('.range2').html($('.slider2').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Range que define até onde pode ir o outro range</h4>
<input type="range" min="1" max="10" value="0.01" id="myTime" class="slider1">
<br>
Valor do primeiro range: <span class='range1'>1</span>
<br>
<h4>O range abaixo tem um valor máximo definido pelo range acima</h4>
<input type="range" min="1" max="10" value="0.01" id="myTime" class="slider2">
<br>
Valor do segundo range: <span class='range2'>1</span>

When the first range changes, the second range will always receive the maximum current value of the first range.

  • Thank you very much, it helped a lot...

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.