Trackbar with 2 tracker js noui range slider, how to write meanings?

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" class="noUi-target noUi-ltr noUi-horizontal"><div class="noUi-base"><div class="noUi-origin" style="left: 20%;"><div class="noUi-handle noUi-handle-lower" data-handle="0" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="80.0" aria-valuenow="20.0" aria-valuetext="12.00" style="z-index: 5;"></div></div><div class="noUi-connect" style="left: 20%; right: 20%;"></div><div class="noUi-origin" style="left: 80%;"><div class="noUi-handle noUi-handle-upper" data-handle="1" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="20.0" aria-valuemax="100.0" aria-valuenow="80.0" aria-valuetext="18.00" style="z-index: 4;"></div></div></div></div>