En este artículo, aprenderemos cómo agregar un control deslizante de rango en HTML. Entonces, Geeks, como sabemos, se usa un control deslizante de rango para seleccionar un valor particular de un rango de números. Tenemos valores de rango predeterminados de 0 a 100.
Siga los pasos dados para completar la tarea –
Acercarse:
- Primero, creamos un documento HTML que contiene un elemento <form>.
- Cree un elemento <input> debajo del elemento de formulario.
- Utilice el atributo de tipo con el elemento <input>.
- Establezca el atributo de tipo en el valor «rango».
- También podemos usar los atributos min, max, step y value para establecer las restricciones en el Control deslizante de rango.
Sintaxis:
<input type="range">
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to add a Range Slider using HTML?
</title>
<style>
#Geek_p {
font-size: 30px;
color: green;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>
How to add a Range Slider using HTML?
</h2>
<input type="range" id="Geek_Range" value="90">
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA