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