- let val = 100;

body(style=`--val: ${val}`)
	.box
	.box
	.box
	.box
	.box
	form
		label(for='c') contrast value
		input#c(type='range' value=val)
		output(for='c')

$s: .5em;
$o: .5*$s;
$c: #cb4029, #ff9189, #70caff;

$track-h: 6px;
$track-r: .5*$track-h;

$thumb-d: 1em;
$thumb-r: .5*$thumb-d;

@mixin track() {
	height: $track-h;
	border-radius: $track-r;
	background: dimgrey;
}

@mixin thumb($f: 0) {
	@if $f > 0 {
		margin-top: calc(#{$track-r} + -1*#{$thumb-r})
	}
	
	border: 0;
	width: $thumb-d; height: $thumb-d;
	border-radius: 50%;
	background: currentcolor;
	cursor: ew-resize
}

* { margin: 0; color: inherit; font: inherit }

html, body, form { display: grid }

html { min-height: 100% }

body {
	grid-gap: $s;
	grid-template-columns: repeat(5, 1fr);
	place-content: center;
	padding: $s;
	background: 
		repeating-linear-gradient(-45deg, #0003 0 calc(2px*sqrt(2)), #0000 0 .75em)
		#370617;
	color: #f7b538;
	font: clamp(.625em, 3vw, 1.5em) sans-serif
}

.box {
	aspect-ratio: 1;
	background: nth($c, 1);
	filter: contrast(calc(var(--val)*1%));
	
	&:nth-child(2) { opacity:.5 }
	&:nth-child(3) { background: linear-gradient($c) }
	
	&:nth-child(4) {
		background: 
			repeating-linear-gradient(45deg, 
					nth($c, 2) 0 .75em, nth($c, 3) 0 1.5em)
	}
	
	&:nth-child(5) {
		background: 
			url(https://assets.codepen.io/2017/17_05_a_amur_leopard_25.jpg)
				50%/ cover
	}
}

form {
	grid-area: 2/ 1/ span 1/ -1;
	grid-gap: 2px;
	place-self: center;
	container-type: inline-size;
	width: min(20em, 80vw);
}

label {
	justify-self: center;
	color: #ededed;
	
	&::after { content: ':' }
}

input, output {
	--hov: 0;
	filter: Saturate(var(--hov));
	transition: .35s ease-out
}

[type='range'] {
	&, &::-webkit-slider-thumb { appearance: none }
	
	width: 100%; height: $thumb-d;
	background: #0000;
	transition-property: filter;
	cursor: pointer;
	
	&::-webkit-slider-runnable-track { @include track }
	&::-moz-range-track { @include track }
	&::slider-track { @include track }
	
	&::-webkit-slider-thumb { @include thumb(1) }
	&::-moz-range-thumb { @include thumb }
	&::slider-thumb { @include thumb }
	
	&:focus { outline: none }
	&:is(:hover, :focus) {
		&, & + output { --hov: 1 }
	}
}

output {
	--mov: calc(.01*var(--val)*(100cqi - #{$thumb-d}));
	--pos: 50% 0;
	justify-self: start;
	border: solid $o #0000;
	padding: $o;
	border-radius: calc(#{$o} + 5px);
	transform-origin: 50% 0;
	translate: calc(#{$thumb-r} + var(--mov) + -50%) 2px;
	scale: var(--hov);
	background: 
		conic-gradient(currentcolor 0 0) padding-box, 
		conic-gradient(from 135deg at var(--pos), 
				currentcolor 25%, #0000 0%) 
			var(--pos)/ 50% 50% no-repeat border-box;
	font-family: monospace;
	transition-property: scale, filter;
	counter-reset: v var(--val);
	
	&:after {
		color: #212121;
		content: counter(v) '%'
	}
}

addEventListener('input', e => document.body.style.setProperty('--val', +e.target.value))