p5js createSlider with label and values

p5jsImprovedSlider.js

/**
 * Example:
 *   let param1 = 5;
 *   createSlider(0, 10, param1, 0.01, "Param 1", (val) => { param1 = val; });
 */
export function createSlider (min, max, value, step, text, valueChangeHandler) {
    const container =  document.createElement('div');
    const label =  document.createElement('div');
    const elt = document.createElement('input');
    label.setAttribute('style', "background: #214288; color: white; font-family: monospace; font-size: large");
    container.setAttribute('style', "display: flex;");

    const changeHandler = () => {
        if (valueChangeHandler) { valueChangeHandler(Number(elt.value)) }
        label.textContent = `${text} [${min}, ${max}] = ${elt.value}`;
    };

    elt.addEventListener('input', changeHandler);

    elt.type = 'range';
    elt.min = min;
    elt.max = max;
    if (step === 0) {
      elt.step = 0.000000000000000001; // smallest valid step
    } else if (step) {
      elt.step = step;
    }
    if (typeof value === 'number') elt.value = value;

    changeHandler();

    container.appendChild(elt);
    container.appendChild(label);
    document.body.appendChild(container);
    return elt;
};

This will create a slider that looks like this: