Comparaison slider avec texte

Html

<section class="section"> 
      <div class="container"> 
        <div class="columns is-vcentered"> 
          <div class="column is-8"> 
              <div id="comparison" class=""> 
                <figure> 
                  <div id="divisor"></div> 
                </figure> 
                <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()"> 
              </div> 
          </div> 
          <div class="column is-4"> 
            <div class="block"> 
              <figure class="image is-32x32"><img src="<?php echo get_template_directory_uri(); ?>/css/img/logo.svg" alt=""></figure> 
            </div> 
            <h5 class="title is-spaced is-5">Comparaison</h5> 
            <p class="subtitle">Our mission is not to outsell Hooli with a product like their latest Box 3. We are not 
              in it for the money - we are in it to make the whole world decentralized.</p> 
            <div class="buttons"><a class="button is-primary" href="#">Join us</a><a class="button is-text" 
                href="#">Watch more</a></div> 
          </div> 
        </div> 
      </div> 
    </section> 
 

Css

div#comparison {  
  width: 60vw; 
  height: 60vw; 
  max-width: 500px; 
  max-height: 500px; 
  overflow: hidden;  
  margin: 0 auto; 
  } 
 
div#comparison figure {  
  background-image: url(<?php echo get_template_directory_uri(); ?>/css/img/uploads/2.jpg);  
  background-size: cover; 
  position: relative; 
  font-size: 0; 
  width: auto;  
  height: 100%; 
  margin: 0;  
} 
div#comparison figure > img {  
  position: relative; 
  width: 100%; 
} 
div#comparison figure div {  
  background-image: url(<?php echo get_template_directory_uri(); ?>/css/img/uploads/2nb.jpg); 
  background-size: cover; 
  position: absolute; 
  width: 50%;  
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.5); 
  overflow: hidden; 
  bottom: 0; 
  height: 100%; 
} 
 
input[type=range]{ 
  -webkit-appearance:none; 
  -moz-appearance:none; 
  position: relative; 
  top: -2rem; left: -1%; 
  background-color: rgba(255,255,255,0.1); 
  width: 102%;  
} 
input[type=range]:focus {  
  outline: none;  
} 
input[type=range]:active {  
  outline: none;   
} 
 
input[type=range]::-moz-range-track {  
  -moz-appearance:none; 
    height:15px; 
    width: 98%; 
    background-color: rgba(255,255,255,0.1);  
    position: relative; 
    outline: none;     
 } 
input[type=range]::active {  
  border: none;  
  outline: none; 
} 
input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance:none; 
    width: 20px; height: 15px;    
    background: #fff; 
    border-radius: 0; 
   } 
input[type=range]::-moz-range-thumb { 
  -moz-appearance: none; 
  width: 20px; 
  height: 15px; 
  background: #fff; 
  border-radius: 0; 
     }    
input[type=range]:focus::-webkit-slider-thumb { 
    background: rgba(255,255,255,0.5); 
   } 
input[type=range]:focus::-moz-range-thumb { 
    background: rgba(255,255,255,0.5); 
   } 
    
  } 

JavaScript

var divisor = document.getElementById("divisor"), 
slider = document.getElementById("slider"); 
  function moveDivisor() {  
    divisor.style.width = slider.value+"%"; 
  }