slider with chart output + fallback #3

            
              $bg: #3d3d4a;
$k: .1;
$p: 39%;
$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%;
	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 }
	
	&:not(.full) {
		position: relative;
		
		output {
			position: absolute;
			top: 0;
			width: $thumb-d; height: $thumb-d;
			transform: translate(calc(var(--val)/100*#{$track-w - $thumb-d}));
			color: #fff;
			pointer-events: none
		}
	}
	
	&.full {
		height: $track-w;
		box-shadow: 0 0 0 3px hotpink;
		
		[type='range'] {
			display: block;
			transform-origin: 100% 0;
			transform: rotate(-90deg) translatey(-100%);
			box-shadow: inset 0 0 0 3px gold;
		}
		
		output {
			width: $chart-d; height: $chart-d;
			border-radius: 50%;
			color: #7a7a7a;
			font-size: 4.25em;
			font-weight: 700
		}
	}
}

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

	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 {
		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: '%' }
	}
}