<input type='range' style='--k: 50'>

$img: url(https://images.unsplash.com/photo-1610693769001-5f7fa68c38e1?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85);
$thumb-w: 5em;
$thumb-r: .5*$thumb-w;
$thumb-l: 2px;

@mixin track() {
	border: none;
	width: 100%; height: 100%;
	background: 
		$img 50% 75%/ cover, 
		linear-gradient(90deg, transparent var(--p), white 0);
	background-blend-mode: exclusion
}

@mixin thumb() {
	--list: #fff 0% 60deg, transparent 0%;
	border: none;
	width: $thumb-w; height: 100%;
	background: 
		conic-gradient(from 60deg, var(--list)) 0/ 37.5%, 
		conic-gradient(from 240deg, var(--list)) 100%/ 37.5%, 
		radial-gradient(circle, 
				transparent calc(#{$thumb-r} - #{$thumb-l} - 1px), 
				#fff calc(#{$thumb-r} - #{$thumb-l}) calc(#{$thumb-r} - 1px), 
				transparent $thumb-r), 
		linear-gradient(
				#fff calc(50% - #{$thumb-r} + .5*#{$thumb-l}), 
				transparent 0 calc(50% + #{$thumb-r} - .5*#{$thumb-l}), 
				#fff 0) 50% 0/ #{$thumb-l};
	background-repeat: no-repeat;
}

* { margin: 0; padding: 0 }

body { overflow: hidden }

[type='range'] {
	&, &::-webkit-slider-thumb, 
	&::-webkit-slider-runnable-track { -webkit-appearance: none }
	
	--p: calc(var(--k)*1%);
	display: block;
	width: 100vw; height: 100vh;
	
	&::-webkit-slider-runnable-track { @include track }
	&::-moz-range-track { @include track }
	
	&::-webkit-slider-thumb { @include thumb }
	&::-moz-range-thumb { @include thumb }
}

addEventListener('input', e => {
	let _t = e.target;
	_t.style.setProperty('--k', +_t.value)
})

/*
Used in my Taming Blend Modes: `difference` and `exclusion` (https://css-tricks.com/taming-blend-modes-difference-and-exclusion/) article on CSS-Tricks - check it out for context!
*/