<input type="range" min="1" max="20" value="8" id="code-example-slider">

<pre id="code"><code>a {
	color: red;
	&:hover,
	&:focus {
		color: blue;
	}
}</code></pre>


<input type="range" min="0" max="20" value="0" id="raceExampleSlider">

<pre id="race"><code>Race!
						<span>🚕</span>
		<span>🚙</span>
											<span>🚗</span>
</code></pre>

pre {
	border: 1px solid #999;
	padding: 1rem;
	background: #eee;
}

body {
	padding: 1rem;
}

pre span {
	display: inline-block;
	transform: scaleX(-1);
}

#race {
	tab-size: 0;
}

const codeExampleSlider = document.querySelector("#code-example-slider");

codeExampleSlider.addEventListener("input", () => {
	document.querySelector("#code").style.tabSize = codeExampleSlider.value;
});


const raceExampleSlider = document.querySelector("#raceExampleSlider");

raceExampleSlider.addEventListener("input", () => {
	document.querySelector("#race").style.tabSize = raceExampleSlider.value;
})