how to change a button value on changing a slider value

Question

briefly, we want to change a button value using a slider value change. the project is about a button and a slider with that conditions: 1- when there's a value of "0" with slider and the button value is "start" on clicking the button the slider value gets into 50% and the button value is "stop" and color "red". 2- when we change the slider value manually the button gets into red and value is stop 3- when there's a value for slider and clicking on the button with value stop it returns into green and value is start

js code:

function updateButton(btn) {
    
    var strt_chng = document.getElementById("chng_btn");
    var respn = document.getElementById("slider1");

      
    if (strt_chng.value == "Stsrt" || respn.value == 0) {
        strt_chng.value = "Stop";
        strt_chng.style.background = "red";
        respn.value = "50";
    }


    else if (strt_chng.value == "Start" || respn.value > 0) {
        strt_chng.value = "Stop";
        strt_chng.style.background = "red";
    }


    else {
        strt_chng.value = "Start";
        strt_chng.style.background = "green";
        respn.value = "0";

    }
}

html code:

<div class="speed-content">
        <div class="speed-slider">

            <input type="range" onchange="updateSliderPWM(this)" id="slider1" min="0" max="100" step="1" value="0" class="slider">
            <p class="state">Speed: <span id="sliderValue1"></span> &percnt;</p>

           [enter image description here][1]

        </div>

        <div class="speed-buttons">

            <input type="button" onclick="updateButton(this)" id="forward" class="button" value="Forward" />

            <input type="button" onclick="updateButton(this)" id="chng_btn" class="button" value="Start" />

            <input type="button" onclick="updateButton(this)" id="backward" class="button" value="Backward" />

        </div>
    </div>

can anyone help?