<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;

@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() {
	border: none;
	width: $thumb-w; height: 100%;
	background: purple
}

* { 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!
*/