Forum Discussion

BenHickman-6ec5's avatar
BenHickman-6ec5
Community Member
2 years ago

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 the value is between 6 and 10 it is font size 20?

Is that possible?

I was thinking of doing different states with different font sizes?

But I wanted to ask to see or check if there is any other way?

Thank you all,

storyline 360
  • BenHickman-6ec5's avatar
    BenHickman-6ec5
    Community Member
    2 years ago

    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 :-)

  • Robertmaqrquez's avatar
    Robertmaqrquez
    Community Member
    2 years ago

    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.

     
  • WaltHamilton's avatar
    WaltHamilton
    Super Hero
    2 years ago

    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.

Related Content