input range

codeswing.json

{
  "scripts": [],
  "styles": []
}

index.html

<parent-div>
	<div id="component">
		<input type="range" step="any" min="0" max="100" value="50" id="range">
		<progress-bar></progress-bar>
		<progress-thumb></progress-thumb>
	</div>
	<content-div></content-div>
</parent-div>

script.js

const range = document.getElementById('range')
const component = document.getElementById('component')
const onInput = () => {
	const value = range.value
	component.style.setProperty('--value', value)
}
range.addEventListener('input', onInput)

style.css

parent-div {
	--padding: 25px;
	isolation: isolate;
	display: block;
	box-shadow: 0 0 0 1px green;
	display: grid;
	grid-template-rows: auto auto;
}

content-div {
	display: block;
	height: 100px;
	background-color: black;
	opacity: .5;
}

div {
	--value: 50;
	position: relative;
	z-index: 1;
	font-size: 20px;
	height: var(--padding);
}

input {
	display: block;
	width: 100%;
	appearance: none;
	margin: 0;
	padding: 0;
	opacity: 0;
	height: calc(2 * var(--padding));
	cursor: pointer;
}

progress-bar {
	display: block;
	width: 100%;
	height: 5px;
	pointer-events: none;
	position: absolute;
	top: 100%;
	transform: translateY(-50%);
	left: 0;
}

progress-bar::before,
progress-bar::after {
	content: "";
	display: block;
	height: 100%;
	position: absolute;
}

progress-bar::before {
	width: 100%;
	background-color: green;
}

progress-bar::after {
	content: "";
	display: block;
	height: 100%;
	width: calc((100% - 1rem) * var(--value) / 100 + .5rem);
	background-color: lime;
	transition: transform 200ms;
}

input:focus ~ progress-bar::after {
	transform: scaleY(1.5);
}

progress-thumb {
	display: block;
	width: 1rem;
	height: 1rem;
	position: absolute;
	top: 100%;
	transform: translateY(-50%);
	left: calc((100% - 1rem) * var(--value) / 100);
	pointer-events: none;
}

progress-thumb::before,
progress-thumb::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: royalblue;
	border-radius: 50%;
}

progress-thumb::before {
	height: 1.5em;
	width: 1.5em;
	transition: transform 200ms;
	opacity: .5;
}

progress-thumb::after {
	height: 1em;
	width: 1em;
}

input:hover ~ progress-thumb::before {
	transform: translate(-50%, -50%) scale(1.3);
}