Show tick positions in custom range input

Question

Please take a look at the following CodePen. There you can see my custom range input. I want the tick positions of the slider to be shown and for that I added the datalist:<

Answer 1

document.querySelectorAll(".__range-step").forEach(function(ctrl) {
	var el = ctrl.querySelector('input');        
	var output = ctrl.querySelector('output'); 
	var newPoint, newPlace, offset;
	el.oninput =function(){ 
		// colorize step options
		ctrl.querySelectorAll("option").forEach(function(opt) {
			if(opt.value<=el.valueAsNumber)                
				opt.style.backgroundColor = '#48530d';
			else
				opt.style.backgroundColor = '#a4b162';
		});           
	};
	el.oninput();    
});

.__range input
{
  outline: none;
	-webkit-appearance: none;
	background-color: #aaa;
	height: 3px;
	width: 100%;
	margin: 10px auto;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    background: #a4b162;
    border-radius: 0px;
    border: 1px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 1px solid #000000;
    height: 16px;
    width: 16px;
    border-radius: 0px;
    background: #48530d;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
}

.__range-step{
	position: relative;                
}

.__range-max{
	float: right;
}
.__range-step datalist {
	position:relative;
	display: flex;
	justify-content: space-between;
	height: auto;
	bottom: 16px;
	/* disable text selection */
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */                
	user-select: none; /* Standard */
	/* disable click events */
	pointer-events:none;  
}
.__range-step datalist option {
	width: 10px;
	height: 10px;
	min-height: 10px;
  padding:0;
  line-height: 40px;
}

.__range{
  margin:10px 40px;
}