Slider - Label not updating based off input range slider

[dcotto]

I have the code below… im trying to get my slider to update the Label > Span > 100%… how do i target and change that value when the user changes the value of the slider?

javascript

function show(event) {
    let dom = document.createElement("panel");
    dom.innerHTML = `
        <style>
        </style>
        <form method="dialog" id="main">
            <label class="row">
                <span>Quality</span>
                <span>100%</span>
                <input type="range" min=1 max=100 value=100 />
            </label>
            <hr />
            <div class="row">
                <button uxp-variant="cta">Save</button>
            </div>
        </form>
    `;
    event.node.appendChild(dom);
}

function hide(event) {
    event.node.firstChild.remove();
}

function update(selection, documentRoot) {
    // ...update panel DOM based on selection...
}

module.exports = {
    commands: {
        // definitions for each commandId in manifest go here
        generateHtmlCommand: generateHTML
    },
    panels: {
        // definitions for each panelId in manifest go here
        htmlGenPanel: {
            show,
            hide,
            update
        }
    },

[cpryland]

Add an onChange handler for the range input, and use the given event’s target’s value to observe the new value.

[dcotto]

that made sense and worked thank you!

[pklaschka]

By the way: Welcome to the forums