Way to style input[type='range'] track's progress

<input type='range' class='slider' />

<style>
	.slider {
		appearance: none;
		anchor-name: --slider;
		background: none;

		&::before {
			content: '';
			position: absolute;
			inset: anchor(--slider center) anchor(--thumb left) auto anchor(--slider left);
			height: 1px;
			background: red;
		}

		&::-webkit-slider-thumb {
			anchor-name: --thumb;
		}
	}
</style>