JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<div id="container">
  <div id="entries">
    
    <div class="entry">1</div>
    <div class="entry">2</div>
    <div class="entry">3</div>
    <div class="entry">4</div>
    <div class="entry">5</div>
    <div class="entry">6</div>
    <div class="entry">7</div>
    <div class="entry">8</div>
    <div class="entry">9</div>
    <div class="entry">10</div>
    
  </div>
  
  <input type="range" id="slider"/>
  
  <span id="range"></span>
  
</div>

CSS

div
{
  box-sizing:border-box;
}

#container
{
  width:500px;
  background:#f0f0f0;
  white-space:nowrap;
  overflow:hidden;
}

.entries
{
  padding:10px;
}


.entry
{
  display:inline-block;
  width:130px;
  height:130px;
  background:chartreuse;
}

JavaScript

debugger;

var slide = $('#slider');

slide.val(0);

var container = $('#entries');

var mainContainer = $('#container');

slide.on('input',adjustScroll);


function adjustScroll()
{
	debugger;
	var contentSize = mainContainer.width();
  var scrollWidth = parseFloat(container[0].scrollWidth,10);
  
  var dif = scrollWidth - contentSize;
  

  
  var percent = slide.val() / 100;
  
  var currentMargin = parseFloat(container.css('margin-left'),10);
  
  var newMargin = percent * dif;
  
  newMargin = Math.round(newMargin.toFixed(0));
  
  container.css('margin-left', -newMargin + 'px');
  
  $('#range')[0].innerHTML = 'newMargin : ' + newMargin +' \n viewPort : ' + contentSize + 'scrollWidth : '+ scrollWidth;
  
}