[Dúvida] Input range não está aceitando a customização | Bootstrap 5: novos recursos e práticas recomendadas de HTML, CSS e JavaScript

1
resposta

por Ewersson Assis dos Santos

| 90.5k xp | 23 posts

Desenvolver Front-End

Olá pessoal, tudo bem? Espero que sim. Estou com um problema para mudar a cor do input range.

Segue código para análise.

HTML

<label for="nivel-satisfacao" 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">

CSS

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

1 resposta

por Renan Lima

| 2912.9k xp | 6070 posts

Instrutor Scuba Team

12/01/2024

Olá, Ewersson! Como vai?

Pelo que pude observar no código que você compartilhou, parece que o seu CSS está correto. No entanto, não aparece a variável --marrom-claro no seu CSS. Verifica se você definiu ela de forma correta, se não tem nenhum erro de digitação etc.

Para definir a variável, você pode adicionar o seguinte código no topo do seu arquivo CSS:

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

Lembre-se que o seletor ::-webkit-slider-thumb só funciona em navegadores baseados em Webkit, como Chrome e Safari. Para outros navegadores, você pode precisar usar outros seletores. Por exemplo, para o Firefox, você pode usar o seletor ::-moz-range-thumb.

Espero ter ajudado e bons estudos!