En este artículo, aprenderemos cómo utilizar el input de tipo range en Bootstrap 5 para crear controles deslizantes estilizados que permiten a los usuarios seleccionar un valor dentro de un rango definido. Vamos a explorar cómo configurar estos inputs y cómo aplicarles las clases y estilos de Bootstrap.
Introducción
Bootstrap 5 simplifica la creación de inputs de tipo range al proporcionar clases específicas que aplican estilos consistentes y atractivos. Vamos a ver cómo implementar estos inputs paso a paso.
Estructura Básica
Para empezar, creamos la estructura básica en HTML utilizando Visual Studio Code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Range con Bootstrap 5</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="mb-3">
<label for="range1" class="form-label">Range</label>
<input type="range" class="form-range" id="range1">
</div>
</div>
</div>
</div>
</body>
</html>Implementación en Visual Studio Code
Crear un Archivo HTML: Crea un archivo HTML en Visual Studio Code y pega el ejemplo anterior.
Ver en el Navegador: Usa la extensión "Live Server" en Visual Studio Code para abrir el archivo HTML en el navegador y ver los cambios en tiempo real.
Configuración del Input Range
Añadir el Label y el Input
Primero, añadimos un label y un input de tipo range, y aplicamos las clases form-label y form-range de Bootstrap para estilizar el control.
<div class="mb-3">
<label for="range1" class="form-label">Range</label>
<input type="range" class="form-range" id="range1">
</div>Deshabilitar el Input Range
Para deshabilitar el control deslizante, añadimos el atributo disabled al input.
<input type="range" class="form-range" id="range1" disabled>Establecer Mínimo, Máximo y Paso
Podemos configurar los valores mínimo, máximo y el tamaño del paso utilizando los atributos min, max y step de HTML.
<input type="range" class="form-range" id="range1" min="0" max="10" step="1">Ejemplo Completo
Aquí tienes un ejemplo completo que incluye un control deslizante configurado con mínimo, máximo y pasos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Range con Bootstrap 5</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="mb-3">
<label for="range1" class="form-label">Range</label>
<input type="range" class="form-range" id="range1" min="0" max="10" step="1">
</div>
<div class="mb-3">
<label for="range2" class="form-label">Range Deshabilitado</label>
<input type="range" class="form-range" id="range2" min="0" max="10" step="1" disabled>
</div>
<div class="mb-3">
<label for="range3" class="form-label">Range con Saltos de 2 en 2</label>
<input type="range" class="form-range" id="range3" min="0" max="10" step="2">
</div>
</div>
</div>
</div>
</body>
</html>Explicación del Código
Contenedor Principal: Utilizamos un contenedor de Bootstrap (
container) para mantener el contenido centrado y con márgenes adecuados.Fila y Columna: Dentro del contenedor, añadimos una fila (
row) y una columna (col) para estructurar los elementos.Input Range Básico: Añadimos un
labely uninputde tiporangecon las clasesform-labelyform-rangede Bootstrap.Input Range Deshabilitado: Añadimos un control deslizante deshabilitado utilizando el atributo
disabled.Input Range con Saltos: Configuramos un control deslizante con pasos de 2 en 2 utilizando el atributo
step.
Conclusión
Bootstrap 5 facilita la creación de controles deslizantes estilizados y funcionales con sus clases predefinidas. Siguiendo estos pasos, puedes implementar fácilmente inputs de tipo range en tus proyectos.
