Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Input range não está aceitando a customização

Referente ao curso Bootstrap 5: novos recursos e práticas recomendadas de HTML, CSS e JavaScript, no capítulo Formulário com Bootstrap e atividade Faça como eu fiz: formulário responsivo - Estilizando input range

por Ewersson Assis dos Santos
| 95.1k 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
| 3699k xp | 7827 posts
Alura Scuba Team Apoio Educacional - Alura

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!