Изменение скорости смены слайдов

var slides = document.getElementsByClassName('slider__block'); 
var currentSlide = 0; 
var slideInterval = setInterval(nextSlide, 5000); 
 
function timeSlide() { 
  var time = document.getElementById('time'); 
  var interval = document.getElementById('result'); 
  interval.innerHTML = time.value; 
  interval = time.value; 
  setInterval(nextSlide, interval); 
  console.log(interval); 
} 
 
function nextSlide() { 
  goToSlide(currentSlide + 1); 
} 
 
function goToSlide(n) { 
  slides[currentSlide].className = 'slider__block'; 
  currentSlide = (n + slides.length) % slides.length; 
  slides[currentSlide].className = 'slider__block showing'; 
}

li { 
  list-style: none; 
} 
a { 
  text-decoration: none; 
} 
.slider { 
  width: 200px; 
  height: 100px; 
  position: relative; 
  margin: 0 auto; 
} 
.slider__block { 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  z-index: 1; 
} 
.slider__block:nth-child(1) { 
  background: #ccc; 
} 
.slider__block:nth-child(2) { 
  background: red; 
} 
.slider__block:nth-child(3) { 
  background: green; 
} 
.showing { 
  z-index: 2; 
} 
.nav { 
  color: black; 
  font-size: 18px; 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  z-index: 5; 
} 
.slider__nav_prew { 
  left: 5px; 
} 
.slider__nav_next { 
  right: 5px; 
} 
.block { 
  display: table; 
  margin: 20px auto; 
}

<div class="slider"> 
  <ul class="slider__content"> 
    <li class="slider__block showing"></li> 
    <li class="slider__block"></li> 
    <li class="slider__block"></li> 
  </ul> 
</div> 
 
<div class="block"> 
  <label for="time">На данный момент скорость смены слайда: <span id="result">5000 </span> ms</label> 
  <br> 
  <input id="time" type="range" min="1000" max="20000" step="1000" value="5000" oninput="timeSlide()"> 
</div>