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.
You've done a great job with the code, but I'd like to present an alternate approach. You said: "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."
I agree it may be cleaner than a series of states, especially if by clean you mean more elegant and glamorous. It is not more maintainable. To maintain it, you need programming ability. That is a skill that is not necessarily in every Instructional Designer or Developer's toolkit. Very seldom is it even mentioned in searching for or hiring those people, and with good reason. Adding JS to a project should be done only as a very last resort, precisely because of the unlikelyhood that a future maintainer will be a former programmer, like you and I are.
5 Replies
Yes it is, I have worked out the answer to me own question :-)
Now I’m curious. What did you do?
Ha ha. Exactly as I said. I have created about 20 different states on the text box, with slightly increasing sizes.
So when the slider moves I have triggered the slider to change the state of the text box when the slider value is between 40 and 50 etc :-)
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.
Robert,
You've done a great job with the code, but I'd like to present an alternate approach. You said: "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."
I agree it may be cleaner than a series of states, especially if by clean you mean more elegant and glamorous. It is not more maintainable. To maintain it, you need programming ability. That is a skill that is not necessarily in every Instructional Designer or Developer's toolkit. Very seldom is it even mentioned in searching for or hiring those people, and with good reason. Adding JS to a project should be done only as a very last resort, precisely because of the unlikelyhood that a future maintainer will be a former programmer, like you and I are.