Multi-range slider

Slider with multiple handles dividing one range in multiple ranges. Uses nouislider library. jQuery propably not necessary but I use it.

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.2.0/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.2.0/nouislider.min.js"></script>
<div id="my-slider">
  
</div>

CSS

.noUi-connect{
  text-align:center;
}

JavaScript

var multirange = document.getElementById('my-slider');

noUiSlider.create(multirange, {
  start: [ 10, 32, 45, 68 ],
  connect: [true, true, true, true, true],
  tooltips: [true, true, true, true],
  step:1,
  range: {
    'min': [  0 ],
    'max': [ 100 ]
  }
});

//get array of connect elements
var connect = multirange.querySelectorAll('.noUi-connect');

multirange.noUiSlider.on('update', function () {
 var valuesarr = multirange.noUiSlider.get(),
 max = multirange.noUiSlider.options.range.max[0],
 oldsum = multirange.noUiSlider.options.range.min[0];// = slider min, will be usually 0

 for ( var i = 0; i < connect.length; i++ ) {
     if(valuesarr[i]) $(connect[i]).text(valuesarr[i] - oldsum);
     else $(connect[i]).text(max - oldsum);
     oldsum=valuesarr[i];
 }
});