Tips for applying a CSS class to a range slider interval using JavaScript

Question

Tips for applying a CSS class to a range slider interval using JavaScript

Is it possible to dynamically assign a CSS class to an element when the value of a range slider is changed? For example, consider the following slider:

<input id="slider" type="range" min="10" max="50">

I have a JavaScript function that retrieves the slider value, divides it by 10, and rounds it up:

let sliderValue = Number(slider.value);
sliderValue = Math.ceil(sliderValue / 10);

//output:
3
2
1
2
3
4
5 etc. as the slider moves.

I am aiming to add a class named active to an element on the page in order to fade it in whenever the slider value changes. Given that this process occurs 10 times per interval, is there a way for JavaScript to detect when the slider value changes and then apply the designated class?

The current application of the "active" class results in stuttering due to it being assigned 10 times per interval. To visualize the issue, here is a link to a CodePen: CodePen

javascript

Answer 1

Answer №1

Here are the adjustments I made to enhance the performance:

function customizeColors() {
    const colors = {
        colorOne: {
            name: "Color 1",
            value: 1
        },
        colorTwo: {
            name: "Color 2",
            value: 2
        },
        colorThree: {
            name: "Color 3",
            value: 3
        },
        colorFour: {
            name: "Color 4",
            value: 3
        },
        colorFive: {
            name: "Color 5",
            value: 4
        },
        colorSix: {
            name: "Color 6",
            value: 5
        },
        colorSeven: {
            name: "Color 7",
            value: 2
        }
    };

    const slider = document.querySelector("#slider");

    const updateUI = (dataSet) => {
        let output = document.querySelector("#results");
        output.innerHTML = "";
        dataSet.forEach((d) => {
            output.innerHTML += `<div class="result">
      <h3>${d.name}</h3>
      <p>Color Value Number: ${d.value}</p>
      </div>`;
        });

        function showResults() {
            let results = document.querySelectorAll(".result");
            results.forEach((result) => {
                result.classList.add("active");
            });
        }
        window.setTimeout(showResults, 0);
    };

    const applyFilter = () => {
        let data = Object.values(colors);
        let sliderValue = Number(slider.value);
        sliderValue = Math.ceil(sliderValue / 10);
        let filteredData = data.filter((d) => d.value === sliderValue);

        updateUI(filteredData);
    };

    slider.addEventListener("input", applyFilter);
}

customizeColors();

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50vw;
    margin: 5rem auto;
    background: #444;
    color: #f5f5f5;
}

.result {
    margin-top: 4rem;
    background: #c4c4c4;
    padding: 1rem;
    display: block;
    color: #444;
    border-radius: 10px;
    overflow: hidden;
}

.active {
    opacity: 1 !important;
    height: auto !important;
}

<p>Objective: Enhance slider smoothness.</p>
<input id="slider" type="range" min="10" max="50" />
<label for="slider">Slide me</label>
<section id="results"></section>

Answer 2

Here are the adjustments I made to enhance the performance:

function customizeColors() {
    const colors = {
        colorOne: {
            name: "Color 1",
            value: 1
        },
        colorTwo: {
            name: "Color 2",
            value: 2
        },
        colorThree: {
            name: "Color 3",
            value: 3
        },
        colorFour: {
            name: "Color 4",
            value: 3
        },
        colorFive: {
            name: "Color 5",
            value: 4
        },
        colorSix: {
            name: "Color 6",
            value: 5
        },
        colorSeven: {
            name: "Color 7",
            value: 2
        }
    };

    const slider = document.querySelector("#slider");

    const updateUI = (dataSet) => {
        let output = document.querySelector("#results");
        output.innerHTML = "";
        dataSet.forEach((d) => {
            output.innerHTML += `<div class="result">
      <h3>${d.name}</h3>
      <p>Color Value Number: ${d.value}</p>
      </div>`;
        });

        function showResults() {
            let results = document.querySelectorAll(".result");
            results.forEach((result) => {
                result.classList.add("active");
            });
        }
        window.setTimeout(showResults, 0);
    };

    const applyFilter = () => {
        let data = Object.values(colors);
        let sliderValue = Number(slider.value);
        sliderValue = Math.ceil(sliderValue / 10);
        let filteredData = data.filter((d) => d.value === sliderValue);

        updateUI(filteredData);
    };

    slider.addEventListener("input", applyFilter);
}

customizeColors();

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50vw;
    margin: 5rem auto;
    background: #444;
    color: #f5f5f5;
}

.result {
    margin-top: 4rem;
    background: #c4c4c4;
    padding: 1rem;
    display: block;
    color: #444;
    border-radius: 10px;
    overflow: hidden;
}

.active {
    opacity: 1 !important;
    height: auto !important;
}

<p>Objective: Enhance slider smoothness.</p>
<input id="slider" type="range" min="10" max="50" />
<label for="slider">Slide me</label>
<section id="results"></section>

Tips for applying a CSS class to a range slider interval using JavaScript

Answer №1

Similar questions

The data retrieved from localStorage following a redirection using $router.push is empty

Adjust the scroll position when the window is resized

Is there a way to choose all elements in the Bootstrap pagination code using JavaScript?

Routine specified in AJAX is not getting executed

Is it more advisable to implement an async iterator through an async generator function, or would it be more efficient to utilize Symbol.asyncIterator?

Guide to integrating the office-ui-fabric-react library into your current MVC project

Parsing JSON data repeatedly using JavaScript within an HTML environment

Exploring Complex Parent-Child Connections with FeathersJS

Stop Scrolling in VueJS

Give a radio button some class

The conflict between Material UI's CSSBaseline and react-mentions is causing issues

Fetching dynamic information via AJAX for a jQuery tooltip

Angular is unable to successfully send a post request to Node

Having difficulty with building a basic module in Node JS, it's just not cooperating

Modify the appearance of the submit button when the input field is focused

After using JSON.parse(), backslashes are still present

Dynamic Menu Highlight Styling

Converting JSON to HTML without the use of external libraries

Ways to connect a button to a Bootstrap 5 tab class

Restoring an object to its previous clean state in AngularJS