noUislider Trackbar добавить к ползункам отоброжение данных

var snapSlider = document.getElementById('range-slider'); 
noUiSlider.create(snapSlider, { 
  start: [12, 18], 
  snap: true, 
  connect: true, 
  range: { 
    'min': 10, 
    '10%': 11, 
    '20%': 12, 
    '30%': 13, 
    '40%': 14, 
    '50%': 15, 
    '60%': 16, 
    '70%': 17, 
    '80%': 18, 
    '90%': 19, 
    'max': 20 
 
  } 
}); 
 
var snapValues = [ 
  document.getElementById('slider-value-lower'), 
  document.getElementById('slider-value-upper') 
]; 
var timefield = document.getElementById('time'); 
timefield.value = '12:00 - 18:00'; 
 
snapSlider.noUiSlider.on('update', function(values, handle) { 
  snapValues[handle].innerHTML = parseInt(values[handle]) + ':00'; 
  timefield.value = parseInt(values[0]) + ':00 - ' + parseInt(values[1]) + ':00'; 
 
});

<div id="range-slider"></div> 
<span class="slider-values"><span id="slider-value-lower">9:00</span><span> - </span><span id="slider-value-upper">17:00</span></span>