<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;
})