Slider with filled track

dabblet.css

/**
 * Slider with filled track
 */

.slider {
	height: 32px;
	position: relative;
	--fill-start: 0.5;
	--gap: 4px;
	--progress: 0.5;
	--size: 16px;
}

.handle {
	border: 2px solid grey;
	border-radius: calc(var(--size) / 2);
	height: var(--size);
	left: calc(var(--progress) * (100% - var(--size)));
	position: absolute;
	top: calc(50% - var(--size) / 2);
	width: var(--size);
}

.track-before, .track-after {
	background-color: #ccc;
	border-radius: 1px;
	height: 2px;
	position: absolute;
	top: calc(50% - 1px);
}

.track-before {
	--stop: calc( var(--fill-start) * ((100% + var(--gap)) / var(--progress)) + var(--size) / 2 );
	background-image: linear-gradient(90deg, transparent var(--stop), #777 var(--stop));
	width: calc((100% - var(--size)) * var(--progress) - var(--gap));
}

.track-after {
	--stop: calc( (1 - var(--fill-start)) * ((100% + var(--gap)) / (1 - var(--progress))) + var(--size) / 2 );
	right: 0;
	width: calc((100% - var(--size)) * (1 - var(--progress)) - var(--gap));
	background-image: linear-gradient(270deg, transparent var(--stop), #777 var(--stop));
}

#inputs > label {
	display: flex;
	flex-direction: column;
	margin: 1.5rem 0;
	justify-content: space-between;
}

#inputs input {
	margin: 0;
	width: 100%;
}
 
* {
    box-sizing: border-box;
} 
body {
	font: 1em/1.5 sans-serif;
	margin: 20px;	
	max-width: 400px;
}

dabblet.html

<div class=slider>
	<div class=track-before></div>
	<div class=handle></div>
	<div class=track-after></div>
</div>
<div id=inputs>
	<label>
		Slider Value
		<input type=range name=progress min=0 max=1 step=0.01>
	</label>
	<label>
		Fill Start
		<input type=range name=fill-start min=0 max=1 step=0.01>
	</label>
</div>

dabblet.js

document.getElementById("inputs").oninput = ({currentTarget, target}) => {
	let {name, value} = target;
	const {style} = currentTarget.previousElementSibling;
	
	if (name === "fill-start" && (value == 1 || value == 0)) {
		value = value * 3 - 1;
	}
	
	style.setProperty(`--${name}`, value)
};

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}