Slider with filled track – gradients

dabblet.css

/**
 * Slider with filled track – gradients
 */

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

.handle {
	border: 2px solid #777;
	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 {
	--gap-start: calc((100% - var(--size)) * var(--progress) - var(--gap));
	--gap-end: calc((100% - var(--size)) * var(--progress) + var(--size) + var(--gap));
	--fill: calc((100% - var(--size)) * var(--fill-start) + var(--size) / 2);
	background-image: linear-gradient(90deg, transparent var(--fill), #777 var(--fill), #777 var(--gap-start), transparent var(--gap-start)), 
	                  linear-gradient(90deg, transparent var(--gap-end), #777 var(--gap-end), #777 var(--fill), transparent var(--fill)), 
	                  linear-gradient(90deg, #ccc var(--gap-start), transparent var(--gap-start), transparent var(--gap-end), #ccc var(--gap-end));
	border-radius: 1px;
	height: 2px;
	position: absolute;
	top: calc(50% - 1px);
	width: 100%;
}

#inputs label {
	display: block;
	margin: 1.5rem 0;
}

#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></div>
	<div class=handle></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"}