simple HTML + plain JS slider

<!DOCTYPE html>
<html>
<head>
	<title>Slider</title>
	<style type="text/css">
	.slider-input-group{
		border: solid black 1px;
		padding-bottom: 50px;
		padding-top: 20px;
		padding-right: 100px;
		padding-left: 20px;
		display: block;
		width: 500px;
		height: 50px;
		box-sizing: border-box;  
	}

.slider-in {
		width:100%;
	}

.slider-out {
		position:relative;
		display: inline-block;
    }

</style>
</head>
<body>
<h1>Slider!</h1>
<div class="slider-input-group">
	<input class="slider-in" id="my-slider-input" type="range" min="0" max="100" value="0" step="1">
	<output class="slider-out" for="my-slider-input" style=""></output>
</div>
</body>
<script type="text/javascript">
	
//How you use it
initSlider('.slider-input-group');

document.querySelector('.slider-input-group')
	.addEventListener('update', function(e){
		console.log(e.detail);
	});

// The implementation...
function initSlider(selector){
	const sliderThumbWidth = 15; //this is the value for chrome
	const sliderContainer = document.querySelector(selector);
	const slider = document.querySelector(selector + ' input');
	const output = document.querySelector(selector + ' output');

function setOutput(){
		const outputRect = output.getBoundingClientRect();
		const inputRect = slider.getBoundingClientRect();
	//NOTE: the range over which the slider's 'thumb' can move is the length of the bar minus the width of the 'thumb'
	//NOTE: Also you may want to offset the output by a fixed amount with respect to this calculation, or something
		const xPosition = (slider.value / (slider.max - slider.min))*(inputRect.width-sliderThumbWidth);
		output.innerHTML = '$' + slider.value + ' million'; //could be supplied as a fomatter function
		output.style = 'left:'+xPosition+'px;'; 
		sliderContainer.dispatchEvent(new CustomEvent('update', { 'detail': slider.value }));		
	}

slider.addEventListener('input', function(){
		setOutput();
	});	
	setOutput();
}

</script>
</html>