title: Trying to get this smoother and more natural in behavior
body: <p><strong>My implementation,</strong>
  <a href="http://kodhus.com/kodnest/land/PpNFTgp" rel="nofollow noreferrer">http://kodhus.com/kodnest/land/PpNFTgp</a></p>
  <p>I am curious, as I am not able for some reason to figure this out, how to get my JavaScript to make my slider behave more natural and smoother, if someone knows, how to, or can make this, feel free. I'd be happy to understand.</p>
  <p><strong>JavaScript:</strong></p>
  <pre><code>const thumb = document.querySelector('.thumb');
  const thumbIndicator = document.querySelector('.thumb .thumb-indicator');
  const sliderContainer = document.querySelector('.slider-container');
  const trackProgress = document.querySelector('.track-progress');
  const sliderContainerStart = sliderContainer.offsetLeft;
  const sliderContainerWidth = sliderContainer.offsetWidth;
  var translate;
  var dragging = false;
  var percentage = 14;
  
  document.addEventListener('mousedown', function(e) {
    if (e.target.classList.contains('thumb-indicator')) {
      dragging = true;
      thumbIndicator.classList.add('focus');  
    }
  });
  
  document.addEventListener('mousemove', function(e) {
  
    if (dragging) {
        console.log('moving', e)
      if (e.clientX &lt; sliderContainerStart) {
        translate = 0;
      } else if (e.clientX &gt; sliderContainerWidth + sliderContainerStart) {
        translate = sliderContainerWidth;
      } else {
        translate =  e.clientX - sliderContainer.offsetLeft;  
      }
      
      thumb.style.transform = 'translate(-50%) translate(' + translate + 'px)';
      trackProgress.style.transform = 'scaleX(' + translate / sliderContainerWidth +  ')'
    }
  });
  
  function setPercentage() {
     thumb.style.transform = 'translate(-50%) translate(' + percentage/100 * sliderContainerWidth + 'px)';
    trackProgress.style.transform = 'scaleX(' + percentage/100 +  ')';
  }
  
  function init() {
   setPercentage(); 
  }
  
  init();
  
  document.addEventListener('mouseup', function(e) {
    dragging = false;
    thumbIndicator.classList.remove('focus');
  });
  </code></pre>
  <p><strong>EDIT:</strong> Is there a way to smoothly and naturally increment by one for every slow move?</p>
  <p><strong>Is it possible to make to behave as if, like when one clicks the progress bar so that it jumps there?</strong></p>