Как сделать такой Range Slider?

window.onload = function() { 
  var oSliderTrack = document.querySelector('.slider_track'); 
  var oSliderThumb = document.querySelector('.slider_thumb'); 
 
  function fDotsShow(nDots) { 
    document.querySelector('.slider_dots').innerHTML = '⚫' + ' ⚫'.repeat(nDots) + '<span style="color:#333;">' + ' ⚪'.repeat(30 - nDots) + '</span>'; 
  } 
 
  function fThumbMove(v) { 
    let nShiftX = (isNaN(v)) ? v.pageX : v; 
    if (nShiftX > oSliderTrack.offsetLeft && nShiftX < oSliderTrack.offsetLeft + oSliderTrack.clientWidth) { 
      oSliderThumb.style.left = nShiftX - oSliderTrack.offsetLeft - oSliderThumb.clientWidth / 2 + 'px'; 
      fDotsShow(Math.floor((oSliderThumb.offsetLeft + 11) / (oSliderTrack.clientWidth / 30.3))); 
      document.querySelector('.slider_summ').innerHTML = 900000 + (oSliderThumb.offsetLeft + 11) * 2100 + ' <span class="rub">Р</span>'; 
    } 
  } 
 
  function fThumbReset() { 
    document.removeEventListener('mousemove', fThumbMove); 
    document.removeEventListener('mouseup', fThumbReset); 
  } 
 
  oSliderThumb.addEventListener('mousedown', function() { 
    document.addEventListener('mousemove', fThumbMove); 
    document.addEventListener('mouseup', fThumbReset); 
  }); 
  document.querySelector('.slider_btn.dec').addEventListener('click', function() { 
    fThumbMove(oSliderThumb.offsetLeft + oSliderTrack.offsetLeft + 11); 
  }); 
  document.querySelector('.slider_btn.inc').addEventListener('click', function() { 
    fThumbMove(oSliderThumb.offsetLeft + oSliderTrack.offsetLeft + 13); 
  }); 
  fDotsShow(0); 
}

body { 
  background: #fef7ef; 
} 
 
p { 
  font: bold 1em Arial; 
  text-align: center; 
  margin: .5em auto; 
} 
 
.slider_summ { 
  font: bold 2em Arial; 
  color: #f87f22; 
} 
 
.rub { 
  display: inline-block; 
  line-height: 0.25em; 
  width: 0.4em; 
  border-bottom: 3px solid #f87f22; 
} 
 
.slider_block { 
  margin: 0 auto; 
  display: flex; 
  align-items: center; 
  width: 600px; 
  font: .5em Arial; 
  text-align: center; 
  user-select: none; 
} 
 
.slider_btn { 
  height: 27px; 
  width: 27px; 
  line-height: 19px; 
  color: #fff; 
  background: #000; 
  box-sizing: border-box; 
  border: 4px solid #eee; 
  border-radius: 50%; 
  box-shadow: 0 0 1px #333; 
} 
 
.slider_btn:hover { 
  filter: invert(75%); 
} 
 
.slider_track { 
  position: relative; 
  height: 7px; 
  flex: 1; 
  margin: 0 14px; 
} 
 
.slider_dots { 
  line-height: 8px; 
  color: #f87f22; 
  text-align: justify; 
  text-align-last: justify; 
} 
 
.slider_thumb { 
  position: absolute; 
  height: 31px; 
  width: 24px; 
  top: 27px; 
  left: -10px; 
  background: #f87f22; 
  border-radius: 4px; 
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.2); 
} 
 
.slider_thumb::before { 
  content: ''; 
  position: absolute; 
  height: 11px; 
  width: 22px; 
  top: -10px; 
  left: 0px; 
  background: transparent; 
  box-sizing: border-box; 
  border: 12px solid transparent; 
  border-bottom-color: #f87f22; 
  border-top: 0; 
} 
 
.slider_thumb::after { 
  content: '≡'; 
  position: absolute; 
  height: 23px; 
  width: 20px; 
  top: -2px; 
  left: 2px; 
  color: rgb(249, 160, 95); 
  font: 4em Arial; 
}

<p>Стоимость автомобиля</p> 
<p class="slider_summ">900000 <span class="rub">Р</span></p> 
<div class="slider_block"> 
  <div class="slider_btn dec">◄</div> 
  <div class="slider_track"> 
    <div class="slider_dots"></div> 
    <div class="slider_thumb"></div> 
  </div> 
  <div class="slider_btn inc">►</div> 
</div>