<div x-data="{sliderPos:50}" class="flex items-center justify-center h-screen m-0">
	<div class="relative w-4xl border-2 border-gray-200" style="width: 800px; height: 600px">
		<div class="absolute top-0 left-0 w-full h-full" style="background-image:url('https://source.unsplash.com/random/800x600'); background-size: 800px 100%;"></div>
		<div id="foreground-img" class="absolute top-0 left-0 h-full filter grayscale" :style="`background-image: url('https://source.unsplash.com/random/800x600'); background-size: 800px 100%; width: ${sliderPos}%;`"></div>

		<input type="range" x-on:input="sliderPos = $event.target.value" x-on:change="sliderPos = $event.target.value" min="0" max="100" value="50" class="absolute z-20 flex items-center justify-center w-full h-full m-0 transition-all duration-200 outline-none appearance-none opacity-30 hover:opacity-10 slider-thumb" />

		<div class="absolute inline-block h-full border-t-0 border-r-0 border-b-0 border-l-2 p-1 border-white" :style="`left: ${sliderPos}%;`" aria-hidden="true"></div>
		<div id="sliderButton" class="absolute z-10 flex items-center justify-center w-7 h-7 p-1 bg-white border border-gray-100 rounded-full pointer-events-none" :style="`left: calc(${sliderPos}% - 14px); top: calc(50% - 14px)`">
			<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
				<path d="M8 5a1 1 0 100 2h5.586l-1.293 1.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L13.586 5H8zM12 15a1 1 0 100-2H6.414l1.293-1.293a1 1 0 10-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L6.414 15H12z" />
			</svg>
		</div>
	</div>
</div>
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 6px;
	height: 600px;
	background: white;
	cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
	width: 6px;
	height: 600px;
	background: white;
	cursor: pointer;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js