Javascript Question

Scroll a Div using Javascript + Input type=range

i am currently working on a project where i have to scroll a certain section based on the movement of input type=range.
This is the code-



$('input[type=range]').val('0');
$('input[type=range]').on('change input', function() {
var max = 60;
var value = $(this).val();
var percent = value / max;
var height = $('.tooltip').height();
console.log("v",value);
var top = value + "%";
console.log("t",top);
$('.tooltip').css('top', top);
})

.tooltip {
position: absolute;
left: 0;
background: silver;
border-left: dotted 2px orange;
padding: 2px;
max-width: 200px;
text-align: center;
}
input[type=range] {
margin-top: 50px;
width: 100%;
}
input[type=range]::-webkit-slider-thumb:after {
content: '';
width: 100px;
background: transparent;
color: #000;
border-left: dotted 2px orange;
pointer-events: none;
padding: 50px;
position: relative;
top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:250px;position:relative;border:2px solid;width:200px;overflow:hidden;">

<div class="tooltip">
<p>How can I get this border to <em>consistently</em> align with the one on the thumb?</p>
</div>

</div>
<input type="range" min="0" max="100"/>





-here is the working.
But the problem is, once i scroll upto 100% the scrolling div goes beyond the outer div. I want the scrolling div to stop at the end of outer div, even when thew range is at 100%(the scrolling diov should not cross the outer div). Thanks in Advance.

Answer
  1. change the max def in javascript part to 100, because the input has max="100" defined.
  2. use height difference instead of height.

$('input[type=range]').val('0');
$('input[type=range]').on('change input', function() {
  var max = 100;
  var value = $(this).val();
  var percent = value / max;
  var parent_height = $('.tooltip').parent().height();
  var height = $('.tooltip').height();
  //console.log("p:" + parent_height + " s:" + height + " %:" + percent);
  var top = (parent_height - height) * percent;
  //console.log("t", top, "h", parent_height - height);  
  if(percent <= 1)
    $('.tooltip').css('top', top + "px");
})
.tooltip {
  position: absolute;
  left: 0;
  background: silver;
  border-left: dotted 2px orange;
  padding: 2px;
  max-width: 200px;
  text-align: center;
}
input[type=range] {
  margin-top: 50px;
  width: 100%;
}
input[type=range]::-webkit-slider-thumb:after {
  content: '';
  width: 100px;
  background: transparent;
  color: #000;
  border-left: dotted 2px orange;
  pointer-events: none;
  padding: 50px;
  position: relative;
  top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:250px;position:relative;border:2px solid;width:200px;overflow:hidden;">

  <div class="tooltip">
    <p>How can I get this border to <em>consistently</em> align with the one on the thumb?</p>
  </div>

</div>
<input type="range" min="0" max="100" />

Comments