Scroll a Div using Javascript + Input type=range

Question

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

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

Answer 2

You need to add condition before set the left of the div .

var tooltipWidth = $('.tooltip').width();

if(left + tooltipWidth > width){
    left = width - tooltipWidth;
}

Here is the working sample.