Não estou conseguindo alterar cor do Botão range | Bootstrap 5: novos recursos e práticas recomendadas de HTML, CSS e JavaScript

<label for="customRange1" class="form-label">Nível de Satisfação</label> <input type="range" class="form-range input-range" id="nivel-satisfacao"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> <label class="form-check-label" for="flexCheckDefault"> Deseja receber novidades por email? </label>

Olá, Nathan! Tudo bem?

Pelo que você compartilhou, parece que você está no caminho certo para alterar a cor do botão range. No entanto, um detalhe importante é garantir que a variável --marrom-claro esteja definida corretamente em seu CSS.

A variável --marrom-claro deve ter o valor #B29463 como mencionado no texto da aula. Você pode definir essa variável no início do seu arquivo CSS da seguinte maneira:

:root {
  --marrom-claro: #B29463;
}

Depois disso, o seu código para alterar a cor do botão range deve funcionar corretamente:

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

Além disso, certifique-se de que o arquivo CSS onde você definiu a cor do botão range esteja corretamente vinculado ao seu arquivo HTML. Isso pode ser feito adicionando a seguinte linha no cabeçalho (<head>) do seu arquivo HTML:

<link rel="stylesheet" type="text/css" href="caminho_do_seu_arquivo.css">

Substitua "caminho_do_seu_arquivo.css" pelo caminho real do seu arquivo CSS.

Espero ter ajudado e bons estudos!