33 - form : control range

Mediante la clase 'form-range' podemos definir un estilo coherente entre navegadores para el control visual range.

Por ejemplo si queremos definir un control range en un formulario

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 5</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>

  <div class="container">
    <form>
      <label for="rango1" class="form-label">Ejemplo de contro rango</label>
      <input type="range" class="form-range" id="rango1">
    </form>
  </div> 

</body>
</html>

En Firefox tenemos la siguiente representación:

bootstrap 5 formulario control range

Y en Chrome:

bootstrap 5 formulario control range

Recordemos que al control range podemos definir el valor mínimo y máximo, lo mismo que su paso de avance:

      <input type="range" class="form-range" id="rango1" min="0" max="5" step="0.5">

Ejecutar Ejemplo

Retornar