<div class='wrap'>
	<input id='r' type='range'/>
</div>

$bg: #3d3d4a;
$k: .1;
$track-w: 25em;
$track-h: .02*$track-w;
$thumb-d: $k*$track-w;

@mixin track() {
	border: none;
	width: $track-w; height: $track-h;
	border-radius: .5*$track-h;
	background: #343440
}

@mixin thumb() {
	border: none;
	width: $thumb-d; height: $thumb-d;
	border-radius: 50%;
	background: #e6323e
}

* { margin: 0 }

body { background: $bg }

.wrap {
	margin: 2em auto;
	width: $track-w;
	font: 2vmin trebuchet ms, arial, sans-serif;
	
	@media (max-width: 500px), (max-height: 500px) { font-size: 10px }
  @media (min-width: 1600px), (min-height: 1600px) { font-size: 32px }
}

[type='range'] {
	&, &::-webkit-slider-thumb { -webkit-appearance: none }
	
	display: block;
	padding: 0;
	width: $track-w; height: $thumb-d;
	background: transparent;
	font: inherit;

	&::-webkit-slider-runnable-track { @include track }
	&::-moz-range-track { @include track }
	&::-ms-track { @include track }

	&::-webkit-slider-thumb {
		margin-top: .5*($track-h - $thumb-d);
		@include thumb
	}
	&::-moz-range-thumb { @include thumb }
	&::-ms-thumb {
		margin-top: 0;
		@include thumb
	}
	
	&::-ms-tooltip { display: none }
	
	+ output {
		background: conic-gradient(#e64c65 calc(var(--val)*1%), #41a8ab 0%);
		color: #fff;
		
		&:after { content: '%' }
	}
}

const _R = document.getElementById('r'), 
			_W = _R.parentNode, 
			_O = document.createElement('output');

let val = null;

function update() {
	let newval = +_R.value;

	if(val !== newval)
		_W.style.setProperty('--val', _O.value = val = newval)
};

update();

_O.setAttribute('for', _R.id);
_W.appendChild(_O);

if(getComputedStyle(_O).backgroundImage !== 'none')
	_W.classList.add('full');

addEventListener('input', update, false);
addEventListener('change', update, false);