PROBLEMAS para Estilizando input range [Solución] | Bootstrap 5: prácticas recomendables de HTML, CSS y JavaScript

Buenas, he intentado darle estilos al input ranger, intente de la misma forma que el instructor, pero no funciono.

HTML:

<label for="nivel-satisfaccion" class="form-label fw-bold">Nivel de satisfacción</label>
              <input type="range" class="form-range" id="nivel-satisfaccion">

CSS:

.form-range::-webkit-slider-thumb {
  background-color: var(--cafe-claro);
}

No funcionó porque el navegador que estoy utilizando es Mozilla Firefox, y la solución presentada en el desafío solo es compatible con Chrome, Opera y Safari. Los navegadores interpretan y renderizan los controles de rango () de manera diferente. Dejaré los diferentes estilos para diferentes navegadores:

/* Estilo del pulgar (thumb) para WebKit (Chrome, Safari, Opera) */
.form-range::-webkit-slider-thumb{
  background-color: var(--cafe-claro);
} 

/* Estilo del pulgar (thumb) para Mozilla (Firefox)*/
.form-range::-moz-range-thumb {
  background: var(--cafe-claro);
}

/* Estilo del pulgar (thumb) para Microsoft Edge */
.form-range::-ms-thumb {
    background: var(--cafe-claro);
}

¡Hola Samantha!

Tu solución está correcta, pero es importante recordar que los navegadores interpretan y renderizan los controles de rango de manera diferente, por lo que es necesario aplicar estilos específicos para cada navegador.

La solución que has presentado para estilizar el input range en Mozilla Firefox es la siguiente:

/* Estilo del pulgar (thumb) para Mozilla (Firefox) */
.form-range::-moz-range-thumb {
  background: var(--cafe-claro);
}

Además, es importante recordar que para Microsoft Edge se debe utilizar el siguiente estilo:

/* Estilo del pulgar (thumb) para Microsoft Edge */
.form-range::-ms-thumb {
  background: var(--cafe-claro);
}

Al aplicar estos estilos específicos para cada navegador, deberías poder lograr la estilización del input range de manera consistente en Chrome, Safari, Opera, Firefox y Microsoft Edge.

Espero haber ayudado y buenos estudios!