Slider - Label not updating based off input range slider

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?


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

function hide(event) {

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

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

1 Like

that made sense and worked thank you!

1 Like

By the way: Welcome to the forums :wave::slightly_smiling_face:

1 Like