How do I change the value of a range input

Question

How to associate input range with scrolling images? When scrolling the input range, the images move, you need to make the input range change when scrolling the images

 var scroll = document.getElementById("scroll-range"); scroll.oninput = function() { var panel = document.getElementById("scrolling-container"); var total = panel.scrollWidth - panel.offsetWidth; var percentage = total * (this.value / 100); panel.scrollLeft = percentage; }

 #scrolling-container { display: flex; flex-wrap: nowrap; padding: 1em 0; overflow-x: scroll; overflow-x: -moz-scrollbars-none; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }

 <div class="range-scroll"> <div class="bems-scroller scroll-panel"> <div class="scroll-content" id="scrolling-container"> <li><img src="http://placekitten.com/200/125"> <div class="title">name and more</div> </li> <li><img src="http://placekitten.com/200/125"> <div class="title">name and more</div> </li> <li><img src="http://placekitten.com/200/125"> <div class="title">name and more</div> </li> <li><img src="http://placekitten.com/200/125"> <div class="title">name and more</div> </li> </div> </div> </div> <form class="rangeSlider"> <input class="scroll-range" id="scroll-range" type="range"> </form>

Answer 1

To reflect the scroll to the input range use

• the "scroll" Event
• the math is quite simple: percent = panelScrollLeft / scrollAvail * 100
• Don't forget the <li> is invalid inside <div> . Use a list element instead like <ul>
• Most importantly, don't ever use on* handlers like oninput , onscroll etc., unless you create brand new elements from in-memory. Always use Element.addEventListener() instead. Otherwise you might at some point override the already assigned event handlers.

 const elRange = document.querySelector("#scroll-range"); const elPanel = document.getElementById("scrolling-container"); elRange.addEventListener("input", () => { const tot = elPanel.scrollWidth - elPanel.offsetWidth; const pct = tot * elRange.value / 100; elPanel.scrollLeft = pct; }); elPanel.addEventListener("scroll", () => { const tot = elPanel.scrollWidth - elPanel.offsetWidth; const pct = elPanel.scrollLeft / tot * 100; elRange.value = pct; });

 #scrolling-container { display: flex; flex-wrap: nowrap; padding: 1em 0; overflow: auto; max-width: 300px; }

 <ul class="scroll-content" id="scrolling-container"> <li><img src="http://placekitten.com/200/125"> <div class="title">name and more</div> </li> <li><img src="http://placekitten.com/200/125"> <div class="title">name and more</div> </li> <li><img src="http://placekitten.com/200/125"> <div class="title">name and more</div> </li> <li><img src="http://placekitten.com/200/125"> <div class="title">name and more</div> </li> </ul> <input class="scroll-range" id="scroll-range" type="range" value="0">

• Also, as suggested by other answers try not to use const tot = elPanel.scrollWidth - elPanel.offsetWidth; outside of your functions (ie: at the top of your file). Websites are responsive nowadays and it's always best to recalculate such a value on the fly. It's not an expensive operation since you're just accessing element properties values.

Answer 2

 let scroll = document.getElementById("scroll-range"); let container = document.getElementById("scrolling-container"); let total = container.scrollWidth - container.offsetWidth; scroll.oninput = function() { container.scrollLeft = total * (this.value / 100); } container.onscroll = function() { scroll.value = (container.scrollLeft / total) * 100 }

 #scrolling-container { display: flex; flex-wrap: nowrap; padding: 1em 0; overflow-x: scroll; overflow-x: -moz-scrollbars-none; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }

 <div class="range-scroll"> <div class="bems-scroller scroll-panel"> <div class="scroll-content" id="scrolling-container"> <li><img src="http://placekitten.com/200/125"> <div class="title">name and more</div> </li> <li><img src="http://placekitten.com/200/125"> <div class="title">name and more</div> </li> <li><img src="http://placekitten.com/200/125"> <div class="title">name and more</div> </li> <li><img src="http://placekitten.com/200/125"> <div class="title">name and more</div> </li> </div> </div> </div> <form class="rangeSlider"> <input class="scroll-range" id="scroll-range" type="range"> </form>

Added on scroll function for div