Forum Discussion
Slider and Text Size Question
Hi everyone,
I am need of help.
Is it possible that a slider can be used to change the font size of text?
E.g. If the value of the slider is between 0 and 5 the font size of the text is 10, if...
Html :
<div class="slider-container">
<input type="range" id="fontSlider" min="0" max="10" step="1">
</div>
<div class="text-container">
<p id="changeableText">Sample Text</p>
</div>
Css:
.text-container {
font-size: 16px; /* Default font size */
}
/* Define font sizes for different ranges */
.text-size-10 {
font-size: 10px;
}
.text-size-20 {
font-size: 20px;
}
Javascript:
const fontSlider = document.getElementById("fontSlider");
const changeableText = document.getElementById("changeableText");
fontSlider.addEventListener("input", function () {
const sliderValue = parseInt(fontSlider.value);
if (sliderValue >= 0 && sliderValue <= 5) {
changeableText.classList.remove("text-size-20");
changeableText.classList.add("text-size-10");
} else if (sliderValue >= 6 && sliderValue <= 10) {
changeableText.classList.remove("text-size-10");
changeableText.classList.add("text-size-20");
}
});
In this example, as you move the slider, the JavaScript code detects the slider value and adds or removes CSS classes to the text element to adjust its font size accordingly.
Using different CSS classes for different font sizes and applying/removing these classes based on the slider value change is a clean and maintainable approach. This code can serve as a starting point, and you can further customize it according to your design and requirements.
Remember that this is a basic example, and depending on your project's complexity and framework (if any), the implementation might vary.
