Javascript DOM Form Input Range

Description

Javascript DOM Form Input Range

View in separate window 

  <!DOCTYPE html> 

  <html lang="en"> 
  <body> 
      <form name="form1"> 
          <p> 
              <label for="minValue">Min: </label> 
              <input type="number" id="minValue" name="minValue" /> 
          </p> 
          <p> 
              <label for="maxValue">Max: </label> 
              <input type="number" id="maxValue" name="maxValue" /> 
          </p> 
          <p> 
              <label for="stepValue">Step: </label> 
              <input type="number" id="stepValue" name="stepValue" /> 
          </p> 
          <p> 
            <input type="range" id="slider" name="slider" /> 
        </p> 
    </form> 
    <div id="output"></div> 

    <script> 
        let myForm = document.form1; 
        let output = document.getElementById("output"); 

        function formInputChange() { 
            let slider = myForm.slider; 

            slider.min = parseFloat(myForm.minValue.value); 
            slider.max = parseFloat(myForm.maxValue.value); 
            slider.step = parseFloat(myForm.stepValue.value); 

            output.innerHTML = slider.value; 
        } /*  ww w.  ja v  a2  s.c  om*/

        myForm.addEventListener("input", formInputChange); 
    </script> 
</body> 
</html>



PreviousNext

Related