Propiedad de valor predeterminado de rango de entrada HTML DOM

La propiedad Input Range defaultValue en HTML DOM se usa para establecer o devolver el valor predeterminado del control deslizante. Esta propiedad se utiliza para reflejar el atributo  de valor HTML.

La principal diferencia entre el valor predeterminado y el valor es que el valor predeterminado indica el valor predeterminado y el valor contiene el valor actual después de realizar algunos cambios. Esta propiedad es útil para saber si el campo de rango ha sido modificado o no.

Sintaxis:

Devuelve la propiedad valor predeterminado del rango de entrada .

rangeObject.defaultValue

Se utiliza para establecer la propiedad Valor predeterminado del rango de entrada .

rangeObject.defaultValue = value

Valores de propiedad: Contiene una sola propiedad, es decir, el valor que define el valor predeterminado para el campo de rango.

Valor devuelto : Devuelve un valor de string que representa el valor predeterminado del campo de rango.

Ejemplo: Este ejemplo ilustra cómo devolver la propiedad Input Range defaultValue.

HTML

<!DOCTYPE html>
<html>
  
<style>
    #Geek_p {
        font-size: 30px;
        color: green;
    }
</style>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
  
    <h2>DOM Input Range defaultValue property
    </h2>
    <input name="Geek_range" type="range" 
           id="Geek_Range" value="50">
    <br>
    <br>
    <button onclick="returnDefault()">
        Click Here to return the defaultValue Property
    </button>
    <p id="Geek_p"></p>
  
    <script>
  
        // Set the default value to 10 
        document.getElementById(
            "Geek_Range").defaultValue = "10";
  
        // Return the 
        function returnDefault() {
            var x = document.getElementById(
                "Geek_Range"
            ).defaultValue;
  
            document.getElementById(
                "Geek_p").innerHTML = x;
        }
    </script>
</body>
  
</html>

Producción:

Ejemplo 2: El siguiente código HTML ilustra cómo establecer la propiedad valor predeterminado del rango de entrada.

HTML

<!DOCTYPE html>
<html>
  
<style>
    #Geek_p {
        font-size: 30px;
        color: green;
    }
</style>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
  
    <h2>DOM Input Range defaultValue property
    </h2>
    <input name="Geek_range" type="range"
           id="Geek_Range" value="50">
    <br>
    <br>
    <button onclick="returnDefault()">
        Click Here to Change the defaultValue Property
    </button>
    <p id="Geek_p"></p>
  
    <script>
        function returnDefault() {
            var x =
                document.getElementById(
                    "Geek_Range").defaultValue = "10";
  
            document.getElementById(
                "Geek_p").innerHTML = x;
        }
    </script>
</body>
  
</html>

Producción:

Navegadores compatibles:

  • Google Chrome
  • Internet Explorer 10.0
  • Firefox
  • Safari
  • Ópera

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *