<input type='range' style='--val: 50' aria-label='Comparison slider. Shows a black and white image that is made into a monochrome one after the slider thumb vs. its original version before the slider thumb.'/>
View Compiled
$thumb-w: 1em;
$thumb-x: -.5*$thumb-w;

@mixin thumb($f: 0) {
	@if $f > 0 {
		/* these two only needed for Firefox */
		border: none;
		border-radius: 0
	}
	
	width: $thumb-w; height: 100%;
	background: #fff9;
	cursor: ew-resize
}

* { margin: 0 }

html, body { display: grid }

html { min-height: 100% }

body { overflow: hidden }

[type='range'] {
	&, &::-webkit-slider-thumb { appearance: none }
	
	margin: 0 $thumb-x;
	background: 
		linear-gradient(90deg, #0000 calc(var(--val)*1%), midnightblue 0) 
			50%/ calc(100% - #{$thumb-w}), 
		url(https://images.unsplash.com/photo-1602696538772-97543c359260?w=2400) 
			50%/ cover;
	background-blend-mode: color;
	
	/* explicit track height only needed for WebKit */
	&::-webkit-slider-runnable-track { height: 100% }	
	
	&::-webkit-slider-thumb { @include thumb }
	&::-moz-range-thumb { @include thumb(1) }
}
View Compiled
addEventListener('input', e => {
	let _t = e.target;
	
	_t.style.setProperty('--val', +_t.value)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.