<div class="slider">
<div>
<input type="range" min="1" max="4" step="0.1" value="1" id="font-size-slider">
<label for="font-size-slider">Font Size: <span id="font-size-display">1rem</span></label>
</div>
<div>
<input type="range" min="1" max="3" step="0.1" value="1" id="line-height-slider">
<label for="line-height-slider">Line-height: <span id="line-height-display">1</span></label>
</div>
</div>
<div class="demo">The padding of this box is equal to the relative line-height of the text. this is quite a nice and simple effect. Play around with the line-height custom properties defined in the root to get a better idea...</div>
:root {
--font-size: 1rem;
--line-height: 1;
--padding: 0.8lh; /* Change this value to see the full effect */
}
.demo {
max-width: 40ch;
padding: var(--padding);
background: skyblue;
}
.slider {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: rebeccapurple;
position: fixed;
top: 0;
inset-inline: 0;
padding: 1lh;
font-size: 1rem;
line-height: 1rem;
color: #fff;
& input {
accent-color: skyblue;
}
> div {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: sans-serif;
font-size: var(--font-size);
line-height: var(--line-height);
margin: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* quick and dirty js for the sliders */
const fontSizeSlider = document.getElementById("font-size-slider");
const fontSizeDisplay = document.getElementById("font-size-display");
const lineHeightSlider = document.getElementById("line-height-slider");
const lineHeightDisplay = document.getElementById("line-height-display");
fontSizeSlider.addEventListener("input", (event) => {
fontSizeDisplay.textContent = event.target.value + "rem";
document.documentElement.style.setProperty(
"--font-size",
event.target.value + "rem"
);
});
lineHeightSlider.addEventListener("input", (event) => {
lineHeightDisplay.textContent = event.target.value;
document.documentElement.style.setProperty(
"--line-height",
event.target.value
);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.