Есть такой ползунок, можно ли как-то сделать его функциональным, что б при изменения его значения, скролилась страница к нужному месту

const slider = document.querySelector('#myRange');
const sections = [
  document.querySelector('.section.one'),
  document.querySelector('.section.two'),
  document.querySelector('.section.three'),
  document.querySelector('.section.four'),
]

slider.addEventListener('input', (e) => {
  const sectionIndex = e.target.value;
  
  sections[sectionIndex].scrollIntoView({behavior: 'smooth'});
})

/*CUSTOM STYLES TO SHOW IN CODE SNIPPET (START)*/
input[type=range] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: yellow !important;
}
/*CUSTOM STYLES TO SHOW IN CODE SNIPPET (END)*/

input[type=range] {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  margin-top: 165px;
  margin-right: -50px;
  margin-left: -156px;
  width: 245px;
  height: 3px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.5);
}

.cursor::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3px;
  height: 60px;
  margin-left: 25px;
  background: #FFFFFF;
  opacity: 1;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

input[type=range] {
  position: fixed;
}

.section {
  width: 100%;
  height: 100vh;
}

.section.one {
  background-color: red;
}

.section.two {
  background-color: green;
}

.section.three {
  background-color: blue;
}

.section.four {
  background-color: purple;
}

<div class="slidecontainer">
  <input class="cursor" id="myRange" type="range" id="r1" min="0" max="3" step="1" value="0">
</div>

<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
<div class="section four"></div>