<div class="slider-container">
  <input type="range" min="0" max="100" value="0" class="slider">
 <span id="slider-value"></span>
 
</div>  

$bg : #EEE;
$slider-bg:#FFF;
$slider-thumb: #62438a; 

html,body {
  height:100%;
}
body {
  display:flex;
  align-items:center;
  justify-content:center;
  background:$bg;
}
.slider {
  -webkit-appearance: none;
  appearance:none;
  width:100%;
  height:25px;
  background:$slider-bg;
  outline:none;
  border-radius:20px;
    &::-webkit-slider-thumb {
      -webkit-appearance:none;
      appearance:none;
      width:12px;
      height:40px;
      background:$slider-thumb;
      border-radius:8px;
      cursor:pointer;
      transition:0.1s ease-in-out;
    }
    &::-moz-range-thumb {
      width:12px;
      height:40px;
      background:$slider-thumb;
      border-radius:8px;
      cursor:pointer;
      border:none;
      transition:0.1s ease-in-out;
    }
    &::-moz-range-track {
      background: $slider-bg;
    }
    &:active {
      &::-webkit-slider-thumb {
        background:darken($slider-thumb,10%);
      }
      &::-moz-range-thumb {
      background:darken($slider-thumb,10%);
      }
      + #slider-value {
          opacity:1;
          background:darken($slider-thumb,10%);  
          top: -92px; 
          transform:scale(1,1) translateX(-50%);
      }
    }
}
.slider-container {
  position:relative;
  width:300px;
  & #slider-value {
    position:relative;
    display:block;
    transform: scale(0,0) translateX(-50%);
    width:60px;
    height:60px;
    border-radius:50%;
    line-height:60px;
    background-color:$slider-thumb;
    color:#FFF;
    text-align:center;
    font-size:1.5em;
    font-weight:bolder;
    opacity:0;
    top:-40px;
    z-index:-1;
    transition:0.15s top ease-in-out, 0.15s opacity ease-in-out 0.05s, 0.15s scale ease-in-out;
  }
}

let slider = document.querySelector('.slider'),
    sliderValue = document.querySelector('#slider-value');
    

slider.oninput = function() {
  showValue();
}

function showValue() {  
  sliderValue.innerHTML = slider.value;
  var sliderPosition = ( slider.value / slider.max )
  
  if(slider.value === slider.min) {
    sliderValue.style.left = ((sliderPosition * 100)  + 2 ) + "%";
  }
  else if ( slider.value === slider.max) {
    sliderValue.style.left =  ((sliderPosition * 100) - 2 ) + "%";
  } 
  else {
    sliderValue.style.left = ((sliderPosition * 100)) + "%";
  }
}