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

$bg: #3d3d4a;
$fsr: 4;
$p: 39%;
$k: .1;
$t: .5s;
$track-w: 25em;
$track-h: .02*$track-w;
$thumb-d: $k*$track-w;

$chart-d: (1 - 2*$k)*100%;

@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%;
	transform: scale(.7);
	background: #e6323e;
	filter: saturate(.7);
	transition: transform $t linear, filter $t
}

@mixin thumb-focus() {
	transform: none;
	filter: none
}

%thumb-val {
  position: absolute;
  width: $thumb-d; height: $thumb-d;
	opacity: 0;
  color: #fff;
  pointer-events: none;
	transition: opacity $t ease-in-out
}

* { 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 }
	
	&:not(.full) {
		position: relative;
		
		output {
			@extend %thumb-val;
			top: 0;
			transform: translate(calc(var(--val)/100*#{$track-w - $thumb-d}))
		}
	}
	
	&.full {
		position: relative;
		height: $track-w;
		
		[type='range'] {
			display: block;
			transform-origin: 100% 0;
			transform: rotate(-90deg) translatey(-100%);
		}
		
		output {
			width: $chart-d; height: $chart-d;
			border-radius: 50%;
			color: #7a7a7a;
			font-size: $fsr*1em;
			font-weight: 700;
			
			&:before {
				@extend %thumb-val;
				right: 0; bottom: 0;
				transform: translatey(calc(var(--val)/-100*#{$track-w - $thumb-d}));
				line-height: $thumb-d;
				text-align: center;
				font-size: 1em/$fsr;
				font-weight: 200;
				counter-reset: val var(--val);
				content: counter(val)'%'
			}
		}
	}
}

[type='range'] {
	&, &::-webkit-slider-thumb { -webkit-appearance: none }

	padding: 0;
	width: $track-w; height: $thumb-d;
	background: transparent;
	font: inherit;
	cursor: pointer;

	&::-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 {
		display: flex;
		align-items: center;
		justify-content: center;
		background: radial-gradient($bg $p, transparent $p + .5%),
			conic-gradient(#e64c65 calc(var(--val)*1%), #41a8ab 0%);
		
		&:after { content: '%' }
	}
	
	&:focus {
		outline: none;
		
		&::-webkit-slider-thumb { @include thumb-focus }
		&::-moz-range-thumb { @include thumb-focus }
		&::-ms-thumb { @include thumb-focus }
		
		.wrap:not(.full) & + output, 
		.wrap.full & + output:before { opacity: 1 }
	}
}

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

let val = null, conic = false;

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

	if(val !== newval) {
		_W.style.setProperty('--val', _O.value = val = newval);
		if(conic) _O.setAttribute('aria-label', `${val}%`)
	}
};

update();

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

if(getComputedStyle(_O).backgroundImage !== 'none') {
	conic = true;
  _W.classList.add('full');
  _O.setAttribute('role', 'img');
	_O.setAttribute('aria-label', `${val}%`)
}

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