Input Range

The <input type="range"> provides a slider which outputs a number depending upon where the slider is. The number can then be used in JavaScript and applied to any number of things.

The HTML is simple:

<input type="range">

<input type="range" value="0" step="0.1" min="0" max="100">

You can set the initial value of the element to anything between the min and max values. And you can set the increments with the step attribute.

Looks like this:

And the JS for this:

// the input element
const slider = document.querySelector('#slider');

// the div that changes size
const box = document.querySelector('.box');

// the span element containing the number
const sliderValue = document.querySelector('#slider-value');

slider.addEventListener('input', (e) => {
    let value = e.target.value;
    sliderValue.textContent = value;
    box.style.width = value / 2 + '%';
})

Background colour changer

The 3 sliders control the rgb values for the background.

Reset

Reactivity and state

The colour changer brings up the problem of reactivity. Some methods I used only after the page was refreshed.

Here is the working code from chatGPT:

red.addEventListener('input', (e) => {
  document.body.style.backgroundColor = `rgb(${red.value}, ${green.value}, ${blue.value})`;
});
green.addEventListener('input', (e) => {
  document.body.style.backgroundColor = `rgb(${red.value}, ${green.value}, ${blue.value})`;
});
blue.addEventListener('input', (e) => {
  document.body.style.backgroundColor = `rgb(${red.value}, ${green.value}, ${blue.value})`;
});

Everytime one of the sliders is changed all values and the body style update instantly as a result.

However the first GPT suggestion didn’t work, except after a page reload, and looked like this:

let red = document.getElementById("red").value;
let green = document.getElementById("green").value;
let blue = document.getElementById("blue").value;
document.body.style.backgroundColor = "rgb(" + red + ", " + green + ", " + blue + ")";

Storing the values in variables doesn’t work because in vanilla JS variables are not reactive.

Here was my first try which only worked with page refreshes:

bgSliders.forEach('input', e => {
    let color = e.target.value =
})

red.addEventListener('input', e => {
    return e.target.value
})
green.addEventListener('input', e => {
    // console.log(e.target.value);
    return e.target.value
})
blue.addEventListener('input', e => {
    // console.log(e.target.value);
    return e.target.value
})

let rgb = `rgb(${red.value}, ${green.value}, ${blue.value})`;
document.body.style.backgroundColor = rgb;

JS Libraries

There are many libraries to help with reactivity and state management. React, Vue and Angular are the older and more famous libraries out there and can do many things. But smaller and simpler libraries to fix state mangement.

• Reef JS is only 2.5kb and has just 3 functions.
• Alpine JS is another very popular choice, described as the Tailwind CSS of JavaScript.
• Mithril JS is another library for creating simple SPA’s.
• Hibiki HTML is yet another.
• Petite Vue is a mini (6kb) version of Vue.
• Preact is 3kb, performant version of React
• Svelte is very popular though more general for creating UI’s and SPA’s. It’s a compiler so there is no library to ship at the end which is great.

Markdownified version