Firefox was the only option
 If you ever wanted to apply custom styles to the progress track of <input type='range' /> elements, you could do so with the proprietary ::-moz-range-progress CSS selector.

Of course life can't be so easy that this would work in all the major browsers. For example, Chromium -based ones haven't really ever had a practical solution to accomplish this with just pure CSS. There are some nasty hacks like having a big box-shadow on the left side of the slider thumb, or implementing the whole thing with Javascript. But those have major drawbacks, and are not suitable for many use-cases.

Thankfully nowadays with the invention of CSS anchor positioning , this can be accomplished quite easily in all the latest major browsers . If you're on some latest Chromium -based desktop browser, the following code is a minimal demonstration of how this method works. 

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

<style>
	.slider {
		--border-width: 1px;
		--padding: .5rem;

		appearance: none;
		anchor-name: --slider;
		padding: var(--padding);
		border: 1px solid #fff1;
		margin: 1rem;
		background: #0001;

		&::before {
			--height: 1px;

			content: '';
			position: absolute;
			inset:
				calc(anchor(--slider center) - (var(--height) / 2))
				anchor(--thumb left)
				auto
				calc(anchor(--slider left) + var(--padding) + var(--border-width));
			height: var(--height);
			background: #482;
		}

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